【前端】input輸入和select下拉同時實現

轉自：https://www.jianshu.com/p/357ac299481b

作者：yancolin

方法一：html5 自帶的datalist實現：

html代碼：
<input list="students">
<datalist id="students">
<option value="Lily">
<option value="Lucy">
<option value="Jim">
</datalist>

效果圖如下：

方法二：通過CSS的調試使input和select重合，去除input邊框。再給select加上change事件，給input賦值。

<select id="select" style="width:150px;height:30px;border-radius: 3px;" onchange="change(this)">
<option value="1">測試數據1</option>
<option value="2">數據2</option>
</select>
<input id="datashow" style="width:128px;height: 26px;margin-left: -150px;border:none;" type="text" value>
js代碼：
function change(obj){
var value = $(obj).find('option:selected').text();
$('#datashow').val(value);
}