为什么多选没有更新？

Question

我使用的是bsMultislect和bootstrap 5。我有所有必需的依赖脚本，但是，multiselect元素只有在页面重新加载时才会更新。当选择了另一个select (classNames)中的一个选项时，这应该会触发multiselect中的更新。该脚本仅在页面重新加载后才起作用，并且不适用于classNames select中的更改。我知道bootstrap 5可能会有兼容性问题，然而，这个问题也出现在bootstrap 4中。

  <script>

$('#classNames').change(function(){ 
        var param = $('#classNames').val();
        localStorage.setItem('classParam',$('#classNames').val());
        
        
        var settingStd = {
    "async": false, 
    "url": '<?php echo site_url()."xxxxxxxxxxxxxx.php"; ?>',
    "method": "GET",
     "dataType":"Json",
    "data": { classes : param}
}

$.ajax(settingStd).done(function (restd) {
     
     $("#studentList").find("option").remove();
        var option1 = document.createElement('option');
        option1.setAttribute('value', 'All Students');
            option1.appendChild(document.createTextNode('All Students'));
            var option=null;
            for(var i =0; i<restd.length; i++){ 
                //console.log(restd[i].fName);
            option = document.createElement('option');
            option.setAttribute('value', restd[i].fName+" "+restd[i].lName);
            option.appendChild(document.createTextNode(restd[i].fName+" "+restd[i].lName));
                //console.log(option);
               $('#studentList').append(option);
            }
     $("#studentList").bsMultiselect();
});</script>

Answer 1

您应该将数据中的更改推送到可视组件(没有自动监控)。我们称之为反应性，但options元素列表只是BsMultiSelect的数据，这一点当然不明显。

因此，如果有许多更改，并且您希望刷新整个控件或特定选项更新，则调用BsMusltiSelect的UpdateData：

  var index =15;
          bsMultiSelect.updateOptionSelected(index);
          bsMultiSelect.updateOptionDisabled(index);
          bsMultiSelect.updateOptionHidden(index);

如果更改了15个option

也有用于特殊选项插入和删除的pushers。

这段代码的“查看页面源代码”可以显示接口是如何工作的：https://dashboardcode.github.io/BsMultiSelect/snippetJs.html