在做项目时我们有时会碰上这样的问题,如何限制select的选择条数,如果光凭借JS,JQ恐怕无法解决该问题
现在我们提供一种解决方法:
用div完全模拟select ( 即用<div>配上CSS和jQuery,来打造出一个仿真的<select> ),来达到控制条数的效果。
注:如果你想让其select样式变的更漂亮,也要用到 div完全模拟select。
样式如图:例如选择English
(1)(2)(3)
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<style>
/*div完全模拟select*/
.select-ipt {
color:#000;
background: #FFF5E6;
cursor:pointer;
width:135px;
height: 17px;
margin-top:1.5%;
margin-left: 31px;
line-height:17px;
font-size:12px;
border: 1px solid #000;
border-radius: 2px;
}
.selt{
width: 98%;
padding-left: 3px;
}
/*CSS小三角*/
span.triangle-down {
display: inline-block;
width: 0;
height: 0;
float: right;
position: relative;
right:5px;
top:6px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #666;
}
span.triangle-down:hover{
border-top: 6px solid #002E59;
}
.select-list {
border: 1px #ccc solid;
width:132px;
max-height: 130px;
overflow-y:auto;
margin-left:0px;
position:relative;
left: 32px;
z-index:10000;
background:#fff;
border-radius: 0 0 3px 3px;
}
.select-list span{
cursor:pointer;
display:block;
width:98%;
height:17px;
line-height:17px;
padding:0;
font-size:12px;
margin-top: 3px;
padding-left:3px;
}
.select-list span:hover{
background:#f6615b;
color:#fff
}
</style>
<script type="text/javascript">
$(document).ready(function(){
/*div完全模拟select*/
$(".select-ipt").toggle(function(){
$('.select-list').show();
},function(){
$('.select-list').hide();
});
$(".option").click(function() {
$(".selt").html(this.innerHTML);
$(".select-list").hide();
});
$("div:not(.select-ipt)").click(function() {
$(".select-list").hide();
});
});
</script>
</head>
<body>
<div id="select-box">
<div class="select-ipt">
<span class="selt">Select Experiment</span>
<span class="triangle-down"></span><!-- CSS小三角 -->
</div>
<div style="display: none " class="select-list"><!--下拉框-->
<span class="option" id="0">Select Experiment</span>
<span class="option" >Chinese</span>
<span class="option" >English</span>
<span class="option" >Match</span>
<span class="option" >JAY</span>
<span class="option" >VAE</span>
</div>
</div>
</body>
</html>