如何创建具有预定义值的下拉列表，但也应该有将新值添加到列表中的选项

How to create a dropdown list with predefined values but there should also be the option to add a new one to the list

本文关键字：新值 也应该 添加 选项 列表 下拉列表 创建 何创建 预定义      更新时间：2023-09-26

我想创建一个具有预定义值的下拉列表，但也应该有一个选项可以将新值添加到列表中。

    <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>标签的选项，通过它我可以向列表中添加一个新值并发布到服务器。

在这里你可以找到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>

让页面响应，因此选择选项 vale

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

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

这就是我会做的，长期的方法，但会完成工作并防止将来出现进一步的问题。

您可以

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

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>

相关文章：