可输入可选择下拉框

来源:互联网 发布:怎么参加爱淘宝 编辑:程序博客网 时间:2024/05/23 01:59

别跟我讲需求!这是开发人员心里无时无刻不在呐喊的话哪。。。
这段时间公司在开发个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上,这就形成了可输入可选择下拉框的视觉感受啦。

0 0
原创粉丝点击