html - 可编辑的 'Select' 元素

Question

我想在表单中有一个选择元素，但除了下拉列表中的选项之外，能够编辑它并添加新选项但不使用另一个输入文本会很有用，我需要一次性完成。可能吗？

Answer 1

没有什么是不可能的。这是一个解决方案，只要 <select> 的值出现，就可以简单地设置文本输入的值。更改(呈现已在 Firefox 和 Google Chrome 上测试):

.select-editable {position:relative; background-color:white; border:solid grey 1px;  width:120px; height:18px;}
.select-editable select {position:absolute; top:0px; left:0px; font-size:14px; border:none; width:120px; margin:0;}
.select-editable input {position:absolute; top:0px; left:0px; width:100px; padding:1px; font-size:12px; border:none;}
.select-editable select:focus, .select-editable input:focus {outline:none;}

<div class="select-editable">
  <select onchange="this.nextElementSibling.value=this.value">
    <option value=""></option>
    <option value="115x175 mm">115x175 mm</option>
    <option value="120x160 mm">120x160 mm</option>
    <option value="120x287 mm">120x287 mm</option>
  </select>
  <input type="text" name="format" value=""/>
</div>

jsfiddle:https://jsfiddle.net/nwH8A/

下一个示例将用户输入添加到 <select> 的空选项槽中(感谢@TomerPeled)。它还具有更灵活/可变的 CSS:

.select-editable {position:relative; width:120px;}
.select-editable > * {position:absolute; top:0; left:0; box-sizing:border-box; outline:none;}
.select-editable select {width:100%;}
.select-editable input {width:calc(100% - 20px); margin:1px; border:none; text-overflow:ellipsis;}

<div class="select-editable">
  <select onchange="this.nextElementSibling.value=this.value">
    <option value=""></option>
    <option value="115x175 mm">115x175 mm</option>
    <option value="120x160 mm">120x160 mm</option>
    <option value="120x287 mm">120x287 mm</option>
  </select>
  <input type="text" oninput="this.previousElementSibling.options[0].value=this.value; this.previousElementSibling.options[0].innerHTML=this.value" onchange="this.previousElementSibling.selectedIndex=0" value="" />
</div>

jsfiddle:https://jsfiddle.net/pu7cndLv/1/

---

数据列表

在 HTML5 中，您还可以使用 <input> list attribute 执行此操作和 <datalist> element :

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
(click once to focus and edit, click again to see option dropdown)

jsfiddle:https://jsfiddle.net/hrkxebtw/

但这更像是一个自动完成列表；一旦您开始输入，只有包含输入字符串的选项会作为建议保留下来。根据您的用途，这可能实用也可能不实用。

Can I use datalists ？