很多時候，美工會覺得預設的select下拉框很難看（特別是右邊的下拉箭頭按鈕），他們通常喜歡用一個自訂的圖示來取代這個按鈕。這樣就只能用js div 來模擬了，倒騰了一番，用jQuery模擬了下，當然網上這種文章也不少，只是懶得去看找 複製程式碼 程式碼如下: 自己实现的下拉框 <br> *{font-size:12px;line-height:18px;list-style:none;padding:0;margin:0;text-decoration:none;color:#000;border:0}<br> .page{text-align:center;margin:50px;}<br> input{border-bottom:solid 1px #ccc;height:18px} <br> .expand{display:none;position:absolute;width:200px;height:100px;overflow-y:auto;border:solid 1px #ccc};<br> .expand li{margin:1px 0;background:#fff}<br> .expand a{text-decoration:none;display:block;padding:0 5px;background:#efefef;margin:1px 0}<br> .expand a:hover{background:#ff9}<br> <p> function showExpand(targetId, expandId, expand_class) {<br> //先关掉其它弹出的层<br> if (expand_class != undefined) {<br> $("." + expand_class).hide();<br> }</p> <p> //判断是否为IE<br> var isIE = (! +[1, ]);</p> <p> var expand = $("#" + expandId);<br> var target = $("#" + targetId);</p> <p> var dx = 0;<br> if (isIE) {<br> dx = -2;<br> }<br> else {<br> dx = 0;<br> }<br> expand.get(0).style.left = target.get(0).getBoundingClientRect().left + dx + "px";<br> if (isIE) {<br> dx = 17;<br> }<br> else {<br> dx = 19;<br> }<br> expand.get(0).style.top = parseInt(target.get(0).getBoundingClientRect().top) + dx + "px";<br> expand.show();</p> <p> //每个li点击时赋值<br> $("#" + expandId).find("li").each(function (i) {<br> $(this).show().click(function () {<br> target.val($(this).text().split(' ')[1]);<br> expand.hide();<br> })<br> })</p> <p> <br> }<br> </p> <p> function search(srcId, expandId) {<br> var expand = $("#" + expandId);<br> var src = $("#" + srcId);</p> <p> var A = expand.find("a");<br> var v = src.val().toUpperCase();</p> <p> A.each(function (i) {<br> if (v.length >= 2) {<br> if ($(this).text().toUpperCase().indexOf(v) == -1) {<br> $(this).parent().hide();<br> }<br> else {<br> $(this).parent().show();<br> }<br> }<br> if (v.length <= 0) {<br> $(this).parent().show();<br> }<br> })<br> src.val(v);<br> }</p> <p><br> $().ready(function(){<br> $("#txt_city").keyup(function(){<br> search('txt_city','city_select1');<br> }).focus(function(){<br> showExpand('txt_city','city_select1','expand')<br> })</p> <p> $("#txt_city2").keyup(function(){<br> search('txt_city2','city_select2');<br> }).focus(function(){<br> showExpand('txt_city2','city_select2','expand')<br> })<br> })</p> <p> function fnTest(){<br> document.getElementById("txtTarget").value = document.getElementById("txtSrc").value;<br> }<br> < /head> href="#" onclick="showExpand('txt_city','city_select1','expand')">▼ SH 上海 BJ 北京 HZ 杭州 WH 武汉< /a> ニュージャージー州南京 < ;a href="javascript:void(0)">WX 無锡 < input type="text" value="" id="txt_city2" class="input_expand" /> href="#" onclick="showExpand('txt_city2','city_select2','expand' )">▼ CN 中文 英語 英語< /li> JP 日本 RA 俄语 FA 法语 00 其它 無图無真実、真実在此处：不足之处：1、按键盘上下键時、高輝度の自動移動2がありません、文字入力自動濾過結果時、相対的に原生的な選択を感じますいくつかの不自然
