博主在项目需求中遇到过,需要下拉框这样那样的,但是框架有没有该功能,你说修改框架源码吧,总觉得不是很好,劝产品修改需求吧,更不可能。所以只能自己写一个下拉选择框来满足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,下拉框右侧图表亦需自行添加。