引導程序選擇菜單-添加新選項

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方法。

然后，我們創建一個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> 

Answer 2

你的意思是這樣的嗎？

一些選擇

<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');
});