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

你的意思是这样的吗？

一些选择

<select id="region" class="selectpicker">
        <option>region 1</option>
        <option>region 2</option>
        <option>region 3</option>
</select>

jquery js

$('.selectpicker').selectpicker();
$("#region").on('change', function () {
   $(this)
       .append('<option>region4</option><option>region5</option>')
       .selectpicker('refresh');
});

Answer 2

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

然后我们创建一个option元素，设置其value属性并设置其名称。然后使用appendChild

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

尝试玩这个。我添加了牛排，土豆和啤酒等物品。

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>

Bootstrap选择菜单 - 添加新选项

2 个答案: