基本的select标签下拉框,采用浏览器内置样式,不能更改,极其影响用户体验。故一般前端采用input-ul-li方式模拟select下拉框。
废话不多说,上代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <input readonly="readonly" style="width: 100px;" value="请选择姓名" /> <!--overflow-y:为div层(模拟选项窗)设置垂直滚动--> <div style="height:100px;overflow-y:auto;border-style:groove;display: none;"> <ul style="list-style: none;margin: 0;padding: 0;text-align: center;"> <li>孙逸</li> <li>张三</li> <li>李四</li> <li>王五</li> <li>二麻子</li> <li>小六子</li> <li>九儿</li> <li>巴迪</li> <li>九个</li> <li>四爷</li> </ul> </div> <script type="text/javascript"> //让选项窗与输入窗等宽 $(function() { $("div").css({ 'width': $("input").css('width') }) }) $("input").click(function() { //点击输入框打开选项窗,若已打开则关闭 if($("div").css('display') == 'none') { $("div").show(); $('li:contains(' + $(this).val() + ')').css('background-color', 'orange') } else { $("div").hide(); } }) $("li").click(function() { //点击选择时为输入框赋值。并关闭选项窗 $("input").val($(this).text()) $("div").hide(); }) //为选项设置颜色 $("li").mouseover(function() { $('li').css('background-color', 'white') $(this).css({ 'cursor': 'pointer', 'background-color': 'orange' }); }) </script> </body> </html>
效果展示如下(聚焦选项是指针会变小手指):
此类下拉框相比select来说,能自定义样式与事件,更加灵活美观。