如何在HTML中创build可编辑的下拉列表？
我想用下拉列表创build一个文本字段，让用户select一些预定义的值。 用户还应该能够input一个新的值，或者从下拉列表中select一个预定义的值。 我知道我可以使用两个小部件，但是在我的应用程序中，如果它是在一个小部件中统一的话，它会更符合人体工程学。
有没有一个标准的部件或我必须使用第三方的JavaScript？
浏览器可移植性如何？
最好的办法是使用第三方库。
有一个你在jQuery UI和dojo中寻找的实现。 jQuery更受欢迎，但dojo允许您声明性地定义HTML中的小部件，这听起来更像您要找的东西。
您使用哪一个将取决于您的风格，但都是为跨浏览器工作而开发的，并且两者都会比复制和粘贴代码更新得更频繁。
您可以通过在HTML5中使用<datalist>标记来完成此操作。
<input type="text" name="product" list="productName"/> <datalist id="productName"> <option value="Pen">Pen</option> <option value="Pencil">Pencil</option> <option value="Paper">Paper</option> </datalist>
如果双击浏览器中的input文本，将出现一个带有定义选项的列表。
这可以通过简单的HTML，CSS和JQuery来实现。 我创build了一个示例页面：
$(document).ready(function(){ $(".editableBox").change(function(){ $(".timeTextBox").val($(".editableBox option:selected").html()); }); });
.editableBox { width: 75px; height: 30px; } .timeTextBox { width: 54px; margin-left: -78px; height: 25px; border: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <select class="editableBox"> <option value="1">01:00</option> <option value="2">02:00</option> <option value="3">03:00</option> <option value="4">04:00</option> <option value="5">05:00</option> <option value="6">06:00</option> <option value="7">07:00</option> <option value="8">08:00</option> <option value="9">09:00</option> <option value="10">10:00</option> <option value="11">11:00</option> <option value="12">12:00</option> <option value="13">13:00</option> <option value="14">14:00</option> <option value="15">15:00</option> <option value="16">16:00</option> <option value="17">17:00</option> <option value="18">18:00</option> <option value="19">19:00</option> <option value="20">20:00</option> <option value="21">21:00</option> <option value="22">22:00</option> <option value="23">23:00</option> <option value="24">24:00</option> </select> <input class="timeTextBox" name="timebox" maxlength="5"/> </div>
<select>标签只允许使用预定义的条目。 您的问题的典型解决scheme是有一个条目标记为“其他”和禁用的编辑字段（ <input type="text" ）。 仅当select“其他”时才添加一些JavaScript以启用编辑字段。
有可能以某种方式创build允许直接编辑的下拉菜单，但不值得这个努力。 如果是的话，亚马逊，谷歌或微软将这样做;-)只需要用最简单的解决scheme完成工作。 它更快（你的老板可能会喜欢这样），通常更容易维护（你可能会喜欢这样）。
基于CSS和一行JS代码的非常简单的实现（仅基本function）
<div class="dropdown"> <input type="text" /> <select onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()"> <option>This is option 1</option> <option>Option 2</option> </select> </div>
请注意：它使用旧版浏览器（IE9下）不支持的previousElementSibling，
.dropdown { position: relative; width: 200px; } .dropdown select { width: 100%; } .dropdown > * { box-sizing: border-box; height: 1.5em; } .dropdown select { } .dropdown input { position: absolute; width: calc(100% - 20px); }
这里是JSFiddle
combobox与文本框（对于预定义的值以及用户定义的值。）
combobox与文本框（点击这里）
我不确定有没有办法自动执行没有JavaScript。
你需要的是在浏览器端运行的东西，当用户做出select的时候把你的表单提交回服务器 – 因此，javascript。
此外，确保你有一个替代手段（即提交button）的JavaScriptclosures的人。
一个很好的例子： combobox查看器
我昨天甚至还有一个更复杂的combobox，用这个dhtmlxCombo ，使用ajax检索大量数据中的相关值。
不幸的是，combobox不在HTML规范中。
pipe理它的唯一方法，不幸的是，推出自己的或使用预先build立的。 这个看起来很简单。 我使用这个开放源代码的应用程序，但不幸的是，你必须支付商业用途。
一个小CSS，你完成了小提琴
<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>
