javascript - Bootstrap 选择菜单 - 添加新选项

Question

我有一个带有选择输入的简单 Bootstrap 表单:

<div class="form-group">
  <label for="category" class="control-label col-sm-3">Category</label>
  <div class="input-group col-xs-8">
    <select class="form-control" name="category" id="category">
      <option value="Fruit">Fruit</option>
      <option value="Vegetables">Vegetables</option>
    </select>
  </div>
</div>

用户现在需要能够向选择菜单动态添加新选项，而不是仅限于选择菜单上的元素。

我不确定是否可以修改选择菜单以及如何使其与 Bootstrap 框架的其余部分保持一致？

Answer 1

要动态添加选项，应该有一个 UI 按钮供您选择。要获取用户输入，我们可以使用 window.prompt 方法。

然后我们创建一个选项元素，设置它的值属性并设置它的名字。然后使用 appendChild

将这些元素和节点附加到 DOM

试试这个。我加了一些东西，比如牛排、土 bean 和啤酒。

var addOption = document.getElementById("add-option");
var selectField = document.getElementById("category");
addOption.addEventListener("click", function() {
    var item = prompt("What would you like");
    var option = document.createElement("option");
    option.setAttribute("value", item);
    var optionName = document.createTextNode(item);
    option.appendChild(optionName);
    selectField.appendChild(option);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
  <label for="category" class="control-label col-sm-3">Category</label>
  <div class="input-group col-xs-8">
    <select class="form-control" name="category" id="category">
      <option value="Fruit">Fruit</option>
      <option value="Vegetables">Vegetables</option>
    </select>
  </div>
</div>

<button id="add-option" class="btn btn-primary">Add a new option</button>