2

私はこのデモに取り組んでいます。選択オプションを選択リストに正しくロードできない理由を見つけようとしています。

ユーザーのクリックに基づいて選択を更新するために使用しているコードは次のとおりです

// Initial settign for load 
$( ".selectpicker" ).selectpicker();

// Loading From The First Table
$("#loader1").on("click",function(){
    $(".selectpicker").html('<option value="0">Select From The List</option>'+
                            '<option value="1">Option 1- 1</option>'+
                            '<option value="2">Option 1- 2</option>'+
                            '<option value="3">Option 1- 3</option>'
                           )
    $( ".selectpicker" ).selectpicker("refresh");
});

// Loading From The Second Table
$("#loader2").on("click",function(){
    $(".selectpicker").html('<option value="0">Select From The List</option>'+
                            '<option value="4">Option 1- 1</option>'+
                            '<option value="5">Option 1- 2</option>'+
                            '<option value="6">Option 1- 3</option>'
                           )
    $( ".selectpicker" ).selectpicker("refresh");
});
4

1 に答える 1

4

解決策 1

Bootstrap Select Pickerは、実際にはselect要素を参照として使用するだけです。ソースを表示すると、プラグインが実際に を非表示にselectしdiv、button.

したがって、問題は、プラグインがクラスもコピーし、その内容を置き換えていることです。ID を指定すると、完全に機能します。

更新された HTML:

<select id="selectPicker" class="form-control selectClass" data-container="body" data-live-search="true">
    <option value="0">Select From The List</option>
</select>

更新されたjQuery:

    // Loading From The First Table
$("#loader1").on("click", function () {
    $("#selectPicker").html('<option value="0">Select From The List</option><option value="1">Option 1- 1</option><option value="2">Option 1- 2</option><option value="3">Option 1- 3</option>');
    $(".selectClass").selectpicker("refresh");
});

// Loading From The Second Table
$("#loader2").on("click", function () {
    $("#selectPicker").html('<option value="0">Select From The List</option><option value="4">Option 2- 1</option><option value="5">Option 2- 2</option><option value="6">Option 2- 3</option>');
    $(".selectClass").selectpicker("refresh");
});

ワーキングデモ

解決策 2

ただし、次のように、表示したいオプション リストを単純に表示または非表示にすることもできます。

更新されたjQuery:

// Show first list
$("#loader1").on("click", function () {
    $(".selectpicker1").show();
    $(".selectpicker2").hide();
});

// Show second list
$("#loader2").on("click", function () {
    $(".selectpicker2").show();
    $(".selectpicker1").hide();
});

ただし、元の質問で求められた解決策に引き続き取り組みます。

デモはこちら

于 2014-05-01T23:16:56.237 に答える