Bootstrap 4 为什么multiselect没有更新？

我正在使用BSMultiSelect和bootstrap 5。我有所有必需的依赖脚本，但是，只有在重新加载页面时，才会更新multiselect元素。当选择另一个select（类名）中的选项时，将触发multiselect中的更新。该脚本仅在重新加载页面后工作，而不在选择类名时进行更改。我知道Bootstrap5可能存在兼容性问题，但是，问题也出现在Bootstrap4中

  <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>

$（'#classNames'）.change（function（）{
var param=$（'#classNames'）.val（）；
localStorage.setItem（'classParam'，$（'#classNames'）.val（））；
变量设置标准={
“异步”：false，
“url”：“”，
“方法”：“获取”，
“数据类型”：“Json”，
“数据”：{classes:param}
}
$.ajax（settingStd）.done（函数（restd）{
$（“#学生列表”）.find（“选项”）.remove（）；
var option1=document.createElement（'option'）；
选项1.setAttribute（'value'，'All student'）；
选项1.appendChild（document.createTextNode（“所有学生”）；
var选项=null；
对于（var i=0；i