Javascript 加载带有样式和功能的选择选项

我正在工作。我试图找出为什么我无法将选择选项正确加载到选择列表中

下面是我用来根据用户点击更新选择的代码

// 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 实际上只是使用select元素作为引用。查看您的源代码，您将看到插件实际上隐藏了select，并使用按钮在div中创建了一个完整的新部分

因此，您的问题是，插件也在复制您的类，并替换其内容。给它一个ID，它就会工作得很好

更新的HTML：

尽管如此，我将继续研究您在原始问题中提出的解决方案

解决方案1 实际上只是使用select元素作为引用。查看您的源代码，您将看到插件实际上隐藏了select，并使用按钮在div中创建了一个完整的新部分

因此，您的问题是，插件也在复制您的类，并替换其内容。给它一个ID，它就会工作得很好

更新的HTML：

尽管如此，我将继续研究您在原始问题中提出的解决方案

---

---

不确定代码中是否有，但在.html调用后没有分号。这可能是你的问题吗？如果我是你，我会保持简单，在你的HTML中有两个具有唯一ID的选择选择器，然后隐藏和显示你想要的。另外，你使用的是什么版本的引导？嗨，我使用的是引导v3.1.1，在这个场景中，我有很多表，所以我不希望每个表和选择列表都有很长的代码。我不确定您的代码中是否有，但在.html调用后没有分号。这可能是你的问题吗？如果我是你，我会保持简单，在你的HTML中有两个具有唯一ID的选择选择器，然后隐藏和显示你想要的。另外，你使用的是什么版本的引导？嗨，我使用的是引导v3.1.1，在这个场景中，我有很多表，所以我不希望每个表和选择列表都有一个很长的代码。谢谢fizzix，但正如我已经告诉过你们的，我有一大堆来自数据库的列表。不仅仅是两个！此外，即使在您的示例中，也没有考虑引导选择插件，这是我的主要问题查看“解决方案1”。修复您的问题：我认为您缺少Bootstrap select plugin部分我在加载数据方面没有任何问题，我的问题是加载Bootstrap select plugin的选项。您到底有什么问题？谢谢fizzix，但正如我已经告诉您的，我有一大堆数据库列表。不仅仅是两个！此外，即使在您的示例中，也没有考虑引导选择插件，这是我的主要问题查看“解决方案1”。修复您的问题：我认为您缺少引导选择插件部分我在加载数据方面没有任何问题，我的问题是使用引导选择插件加载选项。您的问题到底是什么？

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

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

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

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