为什么多选不更新？

Question

我将 bsMultislect 与 bootstrap 5 一起使用。我拥有所有必需的依赖脚本，但是，multiselect 元素仅在页面重新加载时才会更新。当另一个 select (classNames) 中的选项被 selected 时，这应该会触发 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 用于特定选项插入和删除。

此代码段的“查看页面源代码”可以显示 API 的工作原理：https://dashboardcode.github.io/BsMultiSelect/snippetJs.html

为什么多选不更新？

Why is multiselect not updating?

bootstrap-4

multi-select

bootstrap-5

bsmultiselect