用样式和函数加载选择选项

Loading select options with style and functions

本文关键字：选择 选项 加载 函数 样式      更新时间：2023-09-26

我正在做这个演示。我想找出为什么我不能正确地将选择选项加载到选择列表中。

下面是我用来根据用户点击

更新选择的代码
// 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");
});
解决方案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();
});

尽管如此，我会继续研究你在最初问题中要求的解决方案。

演示

相关文章：