多くの場合、アーティストはデフォルトの選択ドロップダウン ボックス (特に右側のドロップダウン矢印ボタン) が醜いと感じており、通常、このボタンの代わりにカスタム アイコンを使用することを好みます。このように、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がありません、文字入力自動濾過結果時、相対的に原生的な選択を感じますいくつかの不自然
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
