别跟我讲需求!这是开发人员心里无时无刻不在呐喊的话哪。。。
这段时间公司在开发个b2b电商后台,需求人员和我们说,我这个下拉框是可以输入的哦!我当时一脸懵逼,我接触前端那么久,我就还没见过可输入可选择的下拉框,当时就感觉顿时丰富了我的三观。没办法,那就上网搜呗。。。费我九牛二虎之力
HTML:
<select class="form-control" id="spec_num0" name="spec_num"
onchange="document.getElementById('input0').value=$('#spec_num0 option:selected').text()">
<option>金宇彬</option>
<option>TOP</option>
</select>
<input id="input" class="form-control selectInput" name="input" placeholder="请选择"/>
CSS:
.selectInput{
position:absolute;
margin-left:15px;
padding-left:10px;
width:130px;
height:25px;
left:1px;
top:2px;
border-bottom:0px;
border-right:0px;
border-left:0px;
border-top:0px;
}
它的核心思想就是把input定位在select上,当select发生变化时把值放到input上,这就形成了可输入可选择下拉框的视觉感受啦。