由于 select 没有选中事件（onchange 事件在内容改变时才会触发，选择同一个条目不会触发），只好用其他控件来实现。
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Select</title> <style> .select-container { position: relative; } .select-container input { width: 240px; height: 24px; margin-top: 15px; line-height: 24px; text-indent: 5px; } .select-container span { /* 定位至 input 尾部 */ position: absolute; top: 20px; left: 220px; /* 屏蔽点击事件 */ pointer-events: none; } .select-container ul { /* 定位至 input 下面 */ position: absolute; top: 28px; left: 0px; padding: 0; /* 显示在 input 上面 */ z-index: 1; width: 242px; /* 默认隐藏 */ display: none; list-style: none; /* 边框 */ border: 1px solid #007ACC; } .select-container li a { /* 使背景色占满一行 */ display: inline-block; width: 100%; color: #000000; text-indent: 5px; /* 默认背景色 */ background: #fff; /* 去掉下划线 */ text-decoration: none; } .select-container li a:hover { color: #fff; background: #1F92E4; } </style> </head> <body> <div class="select-container"> <span>▼</span> <input type="text" readonly="readonly" onfocus="this.nextSibling.nextSibling.style.display='block';" onblur="var t=this;setTimeout(()=>{t.nextSibling.nextSibling.style.display='none';},150);" /> <ul> <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;"> <a href="http://www.baidu.com" target="_blank">测试1</a> </li> <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;"> <a href="javascript:;">测试2</a> </li> <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;"> <a href="javascript:;">测试3</a> </li> <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;"> <a href="javascript:;">测试4</a> </li> </ul> </div> <div class="select-container"> <span>▼</span> <input type="text" readonly="readonly" onfocus="this.nextSibling.nextSibling.style.display='block';" onblur="var t=this;setTimeout(()=>{t.nextSibling.nextSibling.style.display='none';},150);" /> <ul> <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;"> <a href="http://www.baidu.com" target="_blank">测试1</a> </li> <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;"> <a href="javascript:;">测试2</a> </li> <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;"> <a href="javascript:;">测试3</a> </li> <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;"> <a href="javascript:;">测试4</a> </li> </ul> </div> </body> <script> window.onload = function () { var list = document.getElementsByClassName('select-container'); for (var i = 0; i < list.length; i++) { list[i].children[1].value = list[i].children[2].children[0].innerText.trim(); } } </script> </html>
效果
http://www.w3school.com.cn/tiy/t.asp
