引导选择菜单 - 添加新的选项

Question

我有一个选择输入一个简单的引导形式：

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

然后我们创建一个选项元素，设置它的值属性并设置它的名字。然后，只需将这些元素和节点附加到DOM中即可。appendChild

请尝试使用此功能。我添加了一些物品，如牛排，土豆和啤酒。

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