如何创建具有预定义值的下拉列表，但也应该有一个选项可以向列表中添加新的列表

Question

我想创建一个包含预定义值的下拉列表，但是还应该有一个选项可以向列表中添加一个新列表。

    <select name="" id="input" class="form-control" required="required">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="">Enter new value</option>
    </select>

在上面的代码中，我想要一个选项来添加新的<option>标签，我可以使用该标签向列表添加新值并发布到服务器。

Answer 1

在这里你可以找到jQuery的解决方案：

https://jsfiddle.net/pqkczuah/

或者您可以使用以下内容：

  $("#input").change(function() { if(this.value == "add") { varNewValue = prompt("Enter new value!"); $("#input").append("<option value='"+varNewValue+"'>"+varNewValue+"</option>"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <select name="" id="input" class="form-control" required="required"> <option value="-">--- Select ---</option> <option value="add">Add New</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> 

Answer 2

让页面响应，所以选择了选项

<option value="">New value</option>

有一个脚本，其中onclick（）; 将出现一个文本输入框。 提交时发送到数据库然后使其成为实时下拉列表。

多数民众赞成我会做什么，长期的方法，但将完成工作，并防止未来的进一步问题。

Answer 3

您可以为用户提供类型文本的输入，以设置选项的值/文本。

 var select = document.querySelector('#input'); var btn = document.querySelector('button'); btn.onclick = function() { var inp = document.querySelector('#newitem'); //get input's value and create a option from it var val = inp.value; var option = new Option(val, val); select.add(option); }; 

 <select name="" id="input" class="form-control" required="required"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="text" id="newitem"> <button>add option</button>