Question

我有一个下拉菜单，我显示2-3个客户ID。现在，用户想要输入未出现在下拉菜单中的客户ID。是否可以使下拉菜单可编辑？

Answer 1

如果您想知道<select> - 输入是否可以编辑，答案是 no ，（不是没有一些切割器Javascripting）。

你可以试试其中一个：

（全部通过google搜索 html editable select ）

Answer 2

我完成了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>

试过了。适用于我的4个目标浏览器。（我也在寻找这个）

Answer 3

您可以尝试使用CSS

尝试关注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>

Answer 4

供将来参考：现在可以在HTML5中使用：

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

https://www.w3schools.com/tags/tag_datalist.asp

下拉菜单可以编辑吗？

4 个答案: