可编辑'选择'元素 [英] Editable 'Select' element

问题描述

我希望在表单中有一个select元素，但除了下拉列表中的选项之外，能够编辑它并添加新选项但不能与其他输入文本一起使用，我只需要一次。可能吗？

I would like to have a select element in the form but besides the options in the dropdown, it would be useful to be able to edit it and add new option but not with another input text, I need all in once. Is it possible?

推荐答案

没有什么是不可能的。下面是一个解决方案，只要< select> 的值发生变化，就可以设置文本输入的值： JSFiddle演示

渲染已经在Firefox和谷歌浏览器上测试过。

Nothing is impossible. Here's a solution that simply sets the value of a text input whenever the value of the <select> changes: Demo on JSFiddle
Rendering has been tested on Firefox and Google Chrome.

<style>
  .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; }
</style>

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

您也可以在HTML5中输入 list 属性和 < datalist> 元素：



You can also do this in HTML5 with the input list attribute and <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>

这篇关于可编辑'选择'元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！