javascript 下拉菜单可以编辑吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4831592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can a dropdown menu be editable?
提问by RMa
I have a dropdown menu in that I'm displaying 2-3 customer ids. Now,user wants to enter a customer id which doesn't appear in the drop down menu. Is it possible to make the drop down menu editable ?
我有一个下拉菜单，其中显示了 2-3 个客户 ID。现在，用户想要输入一个没有出现在下拉菜单中的客户 ID。是否可以使下拉菜单可编辑？
采纳答案by aioobe
If you're wondering if a <select>-input can be made editable, the answer is, no, (not without some cleaver Javascripting).
如果您想知道是否<select>可以将 -input 设为可编辑，答案是，不，（不是没有一些 cleaver Javascripting）。
You could for instance try out one of these:
例如，您可以尝试其中之一：
- http://chakrabarty.com/combobox.html
- http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html
- http://coffeescripter.com/code/editable-select/
- http://chakrabarty.com/combobox.html
- http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html
- http://coffeescripter.com/code/editable-select/
(All found by googling on html editable select)
（全部通过谷歌搜索html 可编辑选择找到）
回答by sp2danny
I made a complete working example of atom217's code (he's missing the function)
我做了一个完整的 atom217 代码的工作示例（他缺少函数）
<script>
function E(id) { return document.getElementById(id); }
function changeit(drp,txf)
{
dd = E(drp);
E(txf).value = dd.options[ dd.selectedIndex ].text;
}
</script>
<div style="position:relative; top:0px; left:0px;" >
<input type="text" id="TextField" style="width:140px; position:absolute; top:1px; left:1px; z-index:2; border:none;" />
<select id="DropDown" onchange="changeit('DropDown','TextField')" style="position: absolute; top: 0px; left: 0px; z-index: 1; width: 165px;" >
<option selected="selected" disabled="disabled">-- Select Column --</option>
<option> example option one </option>
<option> example option two </option>
</select>
</div>
Just tried it. Works on my 4 target browsers. (I was also looking for this)
刚试过。适用于我的 4 个目标浏览器。（我也在找这个）
回答by atom217
you can try doing that using CSS
你可以尝试使用 CSS
try following code(fiddle)
尝试以下代码（小提琴）
<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2" style="width: 140px;
position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
<div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
top: 0px; left: 0px; z-index: 1; width: 165px;">
<option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>
回答by ThePhi
For future reference: it's now available in HTML5:
供将来参考：它现在在 HTML5 中可用：
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
