加载选择样式和功能选项的问题

Question

您能否请一看这个Demo，让我知道为什么我无法正确地将选择选项加载到选择列表中？

以下是我用于根据用户提示更新选择的代码

// 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");
});

谢谢，

Answer 1

解决方案1 ​​

Bootstrap Select Picker实际上只使用select元素作为参考。查看您的来源，您会看到该插件实际上隐藏了select，并在div中使用button创建了一个全新的部分。

因此，您的问题是，该插件还会复制您的类aswel，并替换其内容。给它一个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");
});

WORKING DEMO

解决方案2

虽然，你可以保持简单，只是隐藏或显示你想要显示的选项列表，如下所示：

更新了jQuery：

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

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

虽然，我会继续研究您在原始问题中提出的解决方案。

DEMO HERE