下拉菜单/文本字段合二为一

Question

我正在构建新站点，我需要一个下拉菜单来选择站点中的内容量。但同时我需要这个下拉列表来接受文本。因此，如果客户想从下拉列表中选择，那么他也可以，如果客户想通过文本输入金额，他也可以。如您所见，我想让它成为双重的。

例如：假设有一个 amount 下拉菜单，其元素为(1,2,3)；

假设现在客户需要金额为 5——这是他的权利——它不存在于下拉列表中，因此客户现在必须以文本方式输入金额。因此，对于任何条目，客户必须从下拉列表中选择或以文本方式输入金额。

在描述了我的问题以及我向您介绍的简单示例之后，这是我的问题：

是否有 HTML 代码可以将下拉菜单和文本字段合二为一，作为双重的，而不是分开的？

原文由 khalid jarrah 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

选项1

包括来自 dhtmlgoodies 的脚本并像这样初始化：

 <input type="text" name="myText" value="Norway"
       selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico">

 createEditableSelect(document.forms[0].myText);

选项 2

这是一个自定义解决方案，它结合了 <select> 元素和 <input> 元素，为它们设置样式，并通过 JavaScript 来回切换

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
  <input type="text" name="displayValue" id="displayValue"
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>

原文由 Devang Rathod 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 HTML5 本机执行此操作 <datalist> ：

 <label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

原文由 onaclov2000 发布，翻译遵循 CC BY-SA 3.0 许可协议