Javascript 使用bootstrap-select.js在第一个下拉列表的基础上更改第二个下拉列表的选项

我正在尝试根据第一个下拉列表的选择更改第二个下拉列表的选项

正如您所看到的，它工作的代码。但是，因为我使用bootstrap-select.js，所以它不起作用。我添加这个的原因是为了有一个好的多重效果选择

显然，原因是因为它不再是一个简单的

，在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);
});

食物
果
芥末
番茄酱
苹果
橙色
$（“#choice1”）.change（function（）{
if（typeof$（this）.data（'options'）=“未定义”）{
$（this）.data（'options'，$（'#choice2 option'））.clone（）；
} 
var id=$（this.val（）；
var options=$（this.data（'options'）.filter（'[data option='+id+']）；
$（'#choice2'）.html（选项）；
});

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');
});

这是一个工作演示