使用模拟下拉框公共样式 <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> </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); } 版权声明：本文为jiaqichinese原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/jiaqichinese/article/details/27496489文章导航 ←百融榕树是一个强大的交互式 Python 语言开发环境（百融榕树）重装Mysql→Copyright © 2022 源码巴士 鲁ICP备19024253号-1