使用<div><ul><li>模拟<select>下拉框

公共样式

 <style>

        body {
            padding: 0;
            margin: 0;
            font-size: 12px;
        }
        ul, li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #dropdown {
            position: relative;
            float: right;
            margin-left: 5px;
            margin-right: 50px;
        }
        #input_select {
            width: 68px;
            height: 19px;
            line-height: 18px;
            background: #e8f5fe;
            color: #807a62;
            text-align: center;
            border: 1px solid #a9c9e2;
        }
            #input_select a {
                display: block;
                height: 19px;
                color: #807a62;
                text-decoration: none;
            }
            #input_select img {
                margin-left: 4px;
                margin-bottom: -4px;
                width: 16px;
                height: 16px;
            }
        #dropdown ul {
            width: 68px;
            background: #e8f5fe;
            margin-top: -1px;
            position: absolute;
            display: none;
            border: 1px solid #a9c9e2;
        }
   #dropdown ul li {
      height: 19px;
        line-height: 24px;
        text-indent: 10px;

    }

   #dropdown ul li img {

        margin-left: 4px;
        margin-bottom: -4px;
        width: 16px;
        height: 16px;
    }
    #dropdown ul li a {
             display: block;
             height: 19px;
             color: #807a62;
             text-decoration: none;
      }
      #dropdown ul li a:hover {
              background: #c6dbfc;
              color: #369;
         }
     #result {
         margin-top: 10px;
         text-align: center;
      }

    </style>

extjs实现

<script src="ext/adapter/ext-all.js"></script>

<script type="text/javascript">
        Ext.onReady(
            function fn() {
                var inp = Ext.get("input_select");
                inp.on("click", function () {
                    var ul = Ext.get('language');
                    ul.slideIn();
                })
                var li_a = Ext.select('ul li a');
                li_a.each(function (el, this_, index_i) {
                    var ob = Ext.get(el.dom);
                    ob.on('click', function () {
                        var html = ob.dom.innerHTML;
                        //alert(html);
                        inp.insertHtml = html;
                        document.getElementById('input_select').innerHTML = html;
                        //alert(inp.dom.innerHTML)
                        Ext.get('language').hide();
                    });
                })
            });
    </script>

jquery实现

<script src="js/jquery-1.4.1.js"></script>

<script type="text/javascript">
        $(function () {
            $("#input_select").click(function () {
                var ul = $("#dropdown ul");
                if (ul.css("display") == "none") {
                    ul.slideDown("fast");
                } else {
                    ul.slideUp("fast");
                }
            });
            $("#dropdown ul li a").click(function () {
                var txt = $(this).html();
                $("#input_select").html(txt);
                $("#dropdown ul").hide();
                $("#result").html("您选择了" + txt + "，值为：" + value);
            });
        });    
    </script>

html代码

<div id="dropdown">
        <div id="input_select"> 中文<img src="images/chinese.jpg" /></div>
        <ul id="language">
            <li><a href="#" rel="2">中文<img src="images/chinese.jpg" /></a></li>
            <li><a href="#" rel="3">日语<img src="images/Amex-56.png" /></a></li>
            <li><a href="#" rel="4">韩语<img src="images/Visa-56.png" /></a></li>
            <li><a href="#" rel="5">英语<img src="images/Cash-56.png" /></a></li>
        </ul>
    </div>
    <a href='#' style="float:right; margin-right:-112px; margin-top:5px;">退出</a>
    <div style="float:none;"></div>
    <div id="result"></div>

jquery+select

<script src="js/jquery-1.4.1.js"></script>
    <!-- <msdropdown> -->
    <link href="js/dd.css" rel="stylesheet" />
    <script src="js/jquery.dd.min.js"></script>
    <!-- </msdropdown> -->
    <script>
        //var tc;
        $(document).ready(function (e) {
            $("#payments").msDropdown({ visibleRows: 4 });
        });
    </script>

<table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
            <tr>
                <td valign="top">
                    <select id="payments" name="payments" style="width:250px;">                       
                        <option value="amex" data-image="images/Amex-56.png" data-description="My life. My card...">Amex</option>
                        <option value="Discover" data-image="images/Discover-56.png" data-description="It pays to Discover...">Discover</option>
                        <option value="Mastercard" data-image="images/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
                        <option value="cash" data-image="images/Cash-56.png" data-description="Sorry not available..." disabled="true">Cash on devlivery</option>
                        <option value="Visa" data-image="images/Visa-56.png" data-description="All you need...">Visa</option>
                        <option value="Paypal" data-image="images/Paypal-56.png" data-description="Pay and get paid...">Paypal</option>
                    </select> &nbsp;
                </td>
            </tr>
        </table>

ext.net实现

aspx页面

<ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="iconCls" />
                    <ext:RecordField Name="name" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>

<ext:ComboBox
        ID="ComboBox1"
        runat="server"
        StoreID="Store1"
        Width="98"
        Editable="false"
        DisplayField="name"
        ValueField="name"
        Mode="Local"                                                                                                        
        TriggerAction="All"
        Style="float:none;"
            >
        <Template runat="server">
            <Html>
                <tpl for=".">
                        <div class="x-combo-list-item icon-combo-item {iconCls}">
                            {name}
                        </div>
                    </tpl>
            </Html>
        </Template>
        <Listeners>
            <Select Handler="this.setIconCls(record.get('iconCls'));"  />
        </Listeners>
    </ext:ComboBox>

cs页面

/// <summary>
/// 数据加载
 /// </summary>

private void InitLanguage()
    {
        this.Store1.DataSource = new object[]
        {
            new object[] { ResourceManager.GetIconClassName(Icon.FlagCn), "Chinese"},
            new object[] { ResourceManager.GetIconClassName(Icon.FlagEg), "English"},
            new object[] { ResourceManager.GetIconClassName(Icon.FlagJp), "Japanese"},
            new object[] { ResourceManager.GetIconClassName(Icon.FlagKr), "Korean"}
        };
        this.Store1.DataBind();
        ResourceManager1.RegisterIcon(Icon.FlagCn);
        ResourceManager1.RegisterIcon(Icon.FlagEg);
        ResourceManager1.RegisterIcon(Icon.FlagJp);
        ResourceManager1.RegisterIcon(Icon.FlagKr);
        ComboBox1.SetValue("Chinese");
        ComboBox1.IconCls = ResourceManager.GetIconClassName(Icon.FlagCn);
    }