Измените параметры второго раскрывающегося списка на основе первого раскрывающегося списка, используя bootstrap-select.js

Question

Я пытаюсь изменить параметры второго раскрывающегося списка на основе выбора первого раскрывающегося списка.

Код он работает, как вы можете видеть here. Однако, поскольку он не работает, так как я использую bootstrap-select.js. Причина, по которой я добавил это, состоит в том, чтобы иметь хороший выбор нескольких эффектов.

По-видимому, причина в том, что это не просто <select> с <option> после JS, но я не знаю, как найти решение на этом.

Это код

<select class="form-control" id="choice1"> 
    <option value="Food">Food</option> 
    <option value="Fruit">Fruit</option> 
    </select> 

<select class="selectpicker" multiple id="choice2"> 
    <option data-option="Food" value="M">Mustard</option> 
    <option data-option="Food" value="M">Ketchup</option> 
    <option data-option="Fruit" value="M">Apple</option> 
    <option data-option="Fruit" value="M">Orange</option> 
    </select> 

$("#choice1").change(function() { 
    if(typeof $(this).data('options') === "undefined") { 

    $(this).data('options',$('#choice2 option').clone()); 
    } 
var id = $(this).val(); 
var options = $(this).data('options').filter('[data-option=' + id + ']'); 
$('#choice2').html(options); 
}); 

Answer 1

Bootstrap-select.js имеет метод refresh вы можете использовать. Ваш код JS будет как:

$("#choice1").change(function() { 
    if (typeof $(this).data('options') === "undefined") { 
     /*Taking an array of all options-2 and kind of embedding it on the select1*/ 
     $(this).data('options', $('#choice2 option').clone()); 
    } 
    var id = $(this).val(); 
    var options = $(this).data('options').filter('[data-option=' + id + ']'); 
    $('#choice2').html(options); 
    //Refresh #choice2 to show the new values 
    $('#choice2').selectpicker('refresh'); 
}); 

Here является рабочим демо.