博主在项目需求中遇到过,需要下拉框这样那样的,但是框架有没有该功能,你说修改框架源码吧,总觉得不是很好,劝产品修改需求吧,更不可能。所以只能自己写一个下拉选择框来满足BT的需求。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义下拉框</title> <style> *{ margin: 0; padding: 0; font-family: "Microsoft YaHei"; } .selectBox{ width: 400px; margin: 50px auto; } .viewBox{ width: 400px; height: 40px; color: #303030; cursor: pointer; line-height: 40px; border: 1px solid #dcdcdc; } .viewInput{ width: 345px; height:36px; outline: none; cursor: pointer; padding-left: 10px; font-size: 14px; border: none; } .optionBox{ width: 400px; display: none; background: #f1f1f1; } .optionBox li{ width: 390px; height: 40px; font-size: 14px; color: #c1c1c1; line-height: 40px; cursor: pointer; list-style-type: none; padding-left: 10px; } .optionBox li:hover{ background: #919191; color: white; } .optionBox>li:first-child{ margin-top: 10px; } .btnImg{ float: right; height: 40px; border-left: 1px solid #dcdcdc; } </style> </head> <body> <div class="selectBox"> <div class="viewBox"> <input type="text" class="viewInput" readonly="readonly"> <div class="btnImg"><img src="arrow_input_down.png" alt=""></div> </div> <ul class="optionBox"> <li>1111111111</li> <li>2222222222</li> <li>3333333333</li> <li>4444444444</li> <li>5555555555</li> <li>6666666666</li> <li>7777777777</li> </ul> </div> <script src="GZQ/JQ轮播/js/jquery-1.6.4.min.js"></script> <script> $(function () { var view = $(".optionBox li:first").text(); $(".viewInput").val(view); }); $(".viewBox").click(function () { if($(".optionBox").css("display")=="none"){ $(".optionBox").show(); $(".btnImg img").attr("src","arrow_input_up.png") }else{ $(".optionBox").hide(); $(".btnImg img").attr("src","arrow_input_down.png") } }); var checkOption = $(".optionBox li"); checkOption.click(function () { var index = $(".optionBox li").index(this); var indexVal = $(".optionBox li:eq("+index+")").html(); $(".viewInput").val(indexVal); if($(".optionBox").css("display")=="none"){ $(".optionBox").show(); $(".btnImg img").attr("src","arrow_input_up.png") }else{ $(".optionBox").hide(); $(".btnImg img").attr("src","arrow_input_down.png") } }) </script> </body> </html>
效果图:
PS:代码需自行引入jq,下拉框右侧图表亦需自行添加。