今天做一个项目中用到很多select,但是产品经理让制定的select可以用户输入
首先想到的是1,用模拟select来实现
2,就是不常用的clip属性来实现
1,第一种很常用的就是模拟select
<div class="select_box">
<p><span class="select_input">请选择</span><span class="select_tip"></span></p>
<ul class="select_ul" style="display:none">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
</ul>
</div>
如这些,加上一些点击的js效果就可以了
2,我主要想说的是用clip来剪切显示部分,隐藏部分用input tpye=“text” 来填补。
这样可以想想,select点击的三角形显示出来可以点击出来select的下拉菜单
如代码
<div class="my_select">
<select class="my_select_select" id="my_select_select01">
<option value="1_1" selected>1_1</option>
<option value="1_2">1_2</option>
<option value="1_3">1_3</option>
</select>
<input class="my_select_text" id="my_select_text01" />
</div>
<div class="my_select">
<select class="my_select_select" id="my_select_select02">
<option value="1_1" selected>1_1</option>
<option value="1_2">1_2</option>
<option value="1_3">1_3</option>
</select>
<input class="my_select_text" id="my_select_text02" />
</div>
<style type="text/css">
.my_select {
position:relative;
margin:100px;
font-size:12px;
}
.my_select_select {
position:absolute; left:0; top:0; *top:1px;
width:100px;
clip:rect(0 auto auto 80px);
height:22px; line-height:18px;
}
.my_select_text {
width:80px; *height:16px; *line-height:16px;
}
</style>
<script type="text/javascript"> $(function(){ $(".my_select_select").change(function(){ var id = $(this).attr('id'); var num = id.substr(id.length - 2, 2); $("#my_select_text" + num).val($(this).val()); }); }); </script>
jquery中,主要是找到点击的当前的select然后把值赋给他的input
页面中有很多个这样的可输入的select的话,为了能找到当前所点击的
select,所以用到了01.02来定位。