ブートストラップ選択なし選択なし

Question

私はブートストラップセレクトを使用しています。

<select name="categories[]" id="cat" class="selectpicker" multiple> 
</select> 

、ここからオプションタグを取得し、それは常に何も選択しないと、私は他のオプションを表示scroll down toパソコンへ転送表示が

var result=''; 
for(var i=0; i<res.getcategories.length; i++) 
{      
    result += '<option value='+res.getcategories[i].cat_id+'>'+res.getcategories[i].category+'</option>';     
    $('#cat').html(result); 

} 

。私がbootstapクラス 'selectpicker'を使用しない場合は、すべてが問題ありません。

Answer 1

あなたが必要selectpickerから要素を追加または削除するたびに：

.selectpicker('refresh')：プログラムで最初の新しい状態を一致させるためにUIを更新するために、リフレッシュ方法を使用し、その後、選択を操作する、JavaScriptで選択を更新します。これは、オプションを削除または追加するとき、またはJavaScript経由でselectを無効/有効にするときに必要です。

これは、あなたが実行しなければならないことを意味：

$('#cat').selectpicker('refresh'); 

あなたが最も明確かつ最も簡単な方法は、 jQueryを使用することです新しい要素をその場で追加する必要がありますで

$('#cat').append($('<option>', { 
    value: res.getcategories[i].cat_id, 
    text: res.getcategories[i].category 
})); 

このようにして、<と>または「と」の記号などで問題を回避してください。

選択を処理するには、changed.bs.selectを使用できます。

ので、準備ができて文書に追加する方法と、あなたは追加ボタンと削除と選択の対応する実装をクリックすると上の例は次のとおりです。

var res = { 
 
    getcategories: [{cat_id: 'Cat Id 1', category: 'Category 1'}, 
 
        {cat_id: 'Cat Id 2', category: 'Category 2'}, {cat_id: 'Cat Id 3', category: 'Category 3'}, 
 
        {cat_id: 'Cat Id 4', category: 'Category 4'}, {cat_id: 'Cat Id 5', category: 'Category 5'}] 
 
}; 
 

 
$(function() { 
 
    $('#add').on('click', function (e) { 
 
    for (var i = 0; i < res.getcategories.length; i++) { 
 
     $('#cat').append($('<option>', { 
 
     value: res.getcategories[i].cat_id, 
 
     text: res.getcategories[i].category 
 
     })); 
 
    } 
 
    $('#cat').selectpicker('refresh'); 
 
    }).trigger('click'); // this line to load on selectpicker on document ready 
 

 
    $('#remove').on('click', function (e) { 
 
    $('#cat option').remove(); 
 
    $('#cat').selectpicker('refresh') 
 
    }); 
 
    
 
    $('#cat').on('changed.bs.select', function(e) { 
 
     console.log('Selected elements: ' + ($('#cat').val() || ['Nothing selected']).join(', ')); 
 
    }) 
 
});

<link rel="stylesheet" 
 
     href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> 
 

 

 
<div class="container"> 
 
    <h1>Selectpicker</h1> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <select name="categories[]" id="cat" class="selectpicker" multiple> 
 
      </select> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container-fluid"> 
 
    <h1></h1> 
 

 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
      <button id="add" type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></span> 
 
       Add Options 
 
      </button> 
 
     </div> 
 
     <div class="col-xs-8"> 
 
      <button id="remove" type="button" class="btn btn-default btn-lg"><span 
 
        class="glyphicon glyphicon-remove"></span> Remove Options 
 
      </button> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

bootstrap-selectプラグインはすぐに実行されますが、最初に独自の<option>要素をロードできるように待機する必要があるようです。この作業を取得するために、そう

：

• documentation

あたりとして

コール$('.yourcustomclassname').selectpicker('render');あなたのオプションを読み込み、すぐ

をプラグインを初期化しないために「selectpicker」クラスを削除します

ここをクリックworking fiddle