用js编写可编辑的下拉框

可编辑的下拉框，由input和select组合成，将slelect的左侧隐藏一部分，由input将其覆盖。

<input type="text" id="tbUnit" style="width:121px;position: absolute" />
<select onchange="document.getElementById('tbUnit').value=this.options[this.selectedIndex].value;" style="width:138px;clip: rect(auto auto auto 120px); position: absolute">

<option value="1"> 1</option>
<option value="个">个 </option>
<option value="件">件 </option>
<option value="条">条 </option>

</select>

这里存在一个问题，就是在编辑了输入框后，想要恢复选择项的内容是无法触发select的onchange事件的，所以可以添加input的onchange事件，更改select的选择项index（不太正规）。select默认选的是第一项，做select关联时，添加一项空或者在初始化时做下处理。