用jQuery模拟选择下拉框的简单示例代码

很多时候，美国工会觉得默认的select下拉框很难看(尤其是右侧的下拉箭头按钮)，他们通常喜欢用自定义图标替换这个按钮。

这样就只能用射流研究…分部来模拟了，倒腾了一番，用jQuery模拟了下，当然网上这种文章也不少，只是懒得去看找复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题自己实现的下拉框/title style type=' text/CSS ' media=' all ' * { font-size :12 px；行高：18 px列表式：无；划水：0;余量：0文本装饰：无；color: # 000border:0} .第{ text-align : }页居中；margin:50px}输入{边框-底部：实心1px # CCC高度：18px} .展开{ display:none位置：绝对；宽度宽度：200像素高度：100 px溢出-y :汽车；边框：实心1px # CCC }；展开李{保证金33601 px 0；背景：#fff} .展开{ text-摆设：无；显示：块；padding:0 5px背景# efefefmargin:1px 0 } .展开：悬停{背景： # ff9 }/样式脚本类型=' text/JavaScript ' src=' http :http://Ajax。aspnetcdn。com/Ajax/jQuery/jQuery-1.6。量滴js /脚本类型=' text/JavaScript '函数showExpand(targetId，expandd，expand_class) { //先关掉其它弹出的层if (expand_class！=undefined) { $('。expand_class).hide()；} //判断是否为IE var isIE=(！[1, ]);var expand=$(“#”expand)；var target=$(' # ' TargetID)；var dx=0；if(ISie){ dx=-2；} else { dx=0；}展开。获取(0)。风格。左=目标。获取(0).getBoundingClientRect().左dx ' pxif(ISie){ dx=17；} else { dx=19}展开。获取(0)。风格。top=ParSeint(目标。获取(0).getBoundingClientRect().top)dx ' px '；扩展。show()；//每个里点击时赋值$("#"expandd).查找('里').每个（函数{ $(这个)).显示()。单击(function () { target.val($(this)).文本()。split(')[1])；扩展。hide()；}) }))函数搜索(srcId，expandd){ var expand=$(' # ' expandd)；var src=$(' # ' srcId)；var A=展开。查找(' A ')；var v=src.val().toUpperCase()；a。每个（函数(i) { if (v.length=2) { if ($(this)).文本()。toUpperCase().indexOf(v)==-1) { $(this).父项()。hide()；} else { $(this).父项()。show()；} } if (v.length=0) { $(this).父项()。show()；} })src。val(v)；}$().ready(function(){$('#txt_city ')).keyup(function(){ search(' txt _ city '，' city _ select 1 ')；}).focus(function(){ showExpand(' txt _ city '，' city_select1 '，' expand')})$('#txt_city ').keyup(function(){ search(' txt _ city '，' city _ select 2 ')；}).focus(function(){ showExpand(' txt _ city '，' city_select2 '，' expand ')})function fnTest(){ document。getelementbyid(' txt target ').值=文档。getelementbyid(' TxTsrc ').价值；}/script/head body div class=' page ' style=' text-align : center ' input type=' text ' value=' id=' txt _ city ' class=' input _ expand '/a href=' # onclick=' showExpand(' txt _ city '，' city_select1 '，' expand ')'/a div class=' expand ' id=' city _ select 1 ' ul lia href=' JavaScript : void(0)' SH上海/a/Li lia href=" JavaScript : void(0)" BJ北京/a/Li lia href=' JAVAScript : void(0)' HZ杭州/a/Li lia href=" JavaScript : void(0)" WH武汉/a/Li lia href=' JavaScript : void(0)' NJ南京/a/Li lia href=" JavaScript : void(0)" WX无锡/a/li /ul /div输入类型=' text '值=' id=' txt _ city class=' input _ expand '/a href=' # onclick=' showExpand '(txt _ city '，' city_select2 '，' expand ')'/a div class=' expand ' id=' city _ select 2 ' ul lia href=' JavaScript : void(0)' CN中文/a/Li lia href=' JavaScript : void(0)' EN英语/a/Li lia href=' JavaScript : void(0)' JP日本/a/Li lia href=' JavaScript : void(0)' RA俄语/a/Li lia href=' JavaScript : void(0)' FA法语/a/Li lia href=' JavaScript : void(0)' 00其它/a/Li/ul/div br/br/输入类型=' text ' id=' TxTsrc ' on key up=' FnTest()'/br/输入类型=' text ' id=' TxTArGet '/div/body/html无图无真相，真相在此

缺点：1。按键盘上下键时，没有高亮显示的自动移动；2.当键入单词以自动过滤结果时，与原始选择相比，感觉有些不自然。