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元素作为参考。查看您的源代码，您会看到该插件实际上隐藏了并在 a 中创建了一个select全新的部分。divbutton

因此，您的问题是，该插件还复制了您的类，并替换了它的内容。给它一个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 回答