如何在HTML中创建可编辑的下拉列表？

Question

我想用下拉列表创建一个文本字段，让用户选择一些预定义的值。用户还应该能够输入新值或从下拉列表中选择预定义的值。我知道我可以使用两个小部件，但在我的应用程序中，如果它在一个小部件中统一，它将更符合人体工程学。

有没有标准的部件或我必须使用第三方的JavaScript？

浏览器可移植性如何？

Answer 1

这样做的最好方法可能是使用第三方库。

在jQuery UI和dojo中有一个你正在寻找的实现。 jQuery更受欢迎，但dojo允许您声明性地定义HTML中的窗口小部件，这听起来更像您要查找的内容。

你使用哪一个将取决于你的风格，但都是为跨浏览器工作而开发的，两者都会比复制和粘贴代码更新得更频繁。

Answer 2

我不确定有没有办法自动做到没有JavaScript。

你需要的东西是在浏览器端运行，当用户做出选择时将表单提交回服务器 - 因此，JavaScript。

此外，请确保您为JavaScript关闭的用户提供了替代方法（即提交按钮）。

一个很好的例子：Combo-Box Viewer

我甚至更复杂的组合框昨天，这个dhtmlxCombo，使用Ajax检索数据之间的大量相关的值。

Answer 3

<select>标签只允许使用预定义的条目。解决您的问题的典型方法是将一个条目标记为“其他”和禁用的编辑字段（<input type="text"）。仅当选择“其他”时才添加一些JavaScript以启用编辑字段。

它可能以某种方式创建允许直接编辑的下拉列表，但IMO不值得付出努力。如果是的话，亚马逊，谷歌或微软将这样做;-)只需用最简单的解决方案完成工作。它更快（你的老板可能会喜欢这样），而且通常更容易维护（你可能会喜欢这一点）。

Answer 4

不幸的是，一个组合框不在HTML规范中。

不幸的是，管理它的唯一方法就是推出自己的产品或使用预先建立的产品。 This one看起来很简单。我使用this one作为开源应用程序，但不幸的是您必须为商业用途付费。

Answer 5

您可以使用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> 

如果双击浏览器中的输入文本，将出现一个带有定义选项的列表。

Answer 6

小CSS和你做 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 7

组合框与文本框（对于预先定义的值以及用户定义的值。）

ComboBox with TextBox (Click Here)

Answer 8

基于CSS的非常简单的实现（仅基本功能）和的JS代码一行

<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> 

请注意：它使用previousElementSibling不受支持in older browsers (below IE9)

.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

Answer 9

这可的帮助下实现纯HTML，CSS和JQuery。我创建了一个示例页面：

$(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>