Loading select options with style and functions

Question

I am working on this demo. I am trying to find out why I am not able to load the Select Options into the selection list correctly.

Here is the code which I am using to update the selections based on user clicks

// 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

Solution 1

Bootstrap Select Picker actually just uses the select element as a reference. View your source and you will see that the plugin actually hides the select and creates an entire new section in a div with a button.

Therefore, your problem is, the plugin is also copying over your classes aswel, and replacing its contents. Give it an ID, and it will work perfectly.

Updated HTML:

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

Updated 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

Solution 2

Although, you could keep it simple and just hide or show which ever option list you would like displayed, like so:

Updated jQuery:

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

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

Although, I will continue to work on the solution you asked for in your original question.

DEMO HERE