ブートストラップを選択メニューの追加新しいオプション

Question

私がセレクト入力を持つ単純なブートストラップの形を持っています選択メニューの項目に限定するのではなく、選択メニューを選択します。

選択メニューを変更することができるかどうか、それを他のBootstrapフレームワークと一貫性を持たせる方法はわかりません。

Answer 1

、動的にオプションを追加するには、あなたにその選択を与えるUIボタンがあるはずです選択します。ユーザー入力を得るには、window.promptメソッドを使用できます。

次に、オプション要素を作成し、その値属性を設定し、その名前を設定します。次に、これらの要素とノードをDOMに追加してください。appendChild

これを試してみてください。私はステーキ、ジャガイモ、ビールのようなアイテムを追加しました。あなたが動的に `SELECT`に` `要素を追加するためにJavaScriptを使用

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