为什么多选不更新？答案

【问题标题】：Why is multiselect not updating?为什么多选不更新？
【发布时间】：2024-01-19 04:44:01
【问题描述】：

我正在使用带有引导程序 5 的 bsMultislect。我拥有所有必需的依赖脚本，但是，只有重新加载页面时才会更新多选元素。 When an option in another select (classNames) is selected, this should trigger an update in the multiselect.该脚本仅在页面重新加载后才有效，而不是在 classNames 选择中发生更改。我知道 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>

【问题讨论】：

标签： bootstrap-4 multi-select bootstrap-5 bsmultiselect

【解决方案1】：

您应该将数据更改推送到可视化组件（没有自动监控）。我们称之为反应性，但当然选项元素列表只是 BsMultiSelect 的数据并不明显。

如果有很多更改并且您想刷新整个控件或特定选项更新，请致电 UpdateData 或 BsMusltiSelect：

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

如果 15 option 已更改

还有pushers 用于特定的选项插入和删除。

这个sn-p的“查看页面源码”可以显示API是如何工作的：https://dashboardcode.github.io/BsMultiSelect/snippetJs.html

【讨论】：