아티스트들은 기본 선택 드롭다운 상자가 보기 흉하다고 생각하는 경우가 많으며(특히 오른쪽의 드롭다운 화살표 버튼) 일반적으로 이 버튼을 대체하기 위해 맞춤 아이콘을 사용하는 것을 좋아합니다. 이런식으로 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> NJ 南京 < ;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 中文 EN 英语< /li> JP 日本 RA 俄语 FA 法语 00 其它 无图无真无图无真此：不足之处：1、按键盘上下键时，没有高亮的自动移动2、键入文字自动过滤结果时，感觉相对原生的select有些不自然
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
