Bootstrap Multiselect 更新场景已选值无法回显、新增选择丢失原有选中项

不存在组件本身的bug，所有回显异常都来自代码层面的三个可复现问题：

• 原生HTML结构存在拼接错位的语法错误
  你贴出的代码中标签是断裂拼接的：把select本该设置的id="ahli_ahli"属性拆成了两段，一段嵌在label的闭合标签里，一段散落在标签外，最终形成了label直接包裹select的错误嵌套结构。浏览器解析时无法识别到id为ahli_ahli的有效select元素，后续所有的组件初始化、选中值设置操作都找错了目标，自然无法正常回显数据。
  修正后的标签结构应当把label的必填标记位置、select的id属性独立写完整，避免标签嵌套断裂。
• 组件初始化和赋值的执行顺序错位
  多数场景下你会在页面加载完成后第一时间初始化multiselect组件，等后续拿到接口返回的旧表单数据时，再回头给原生option加选中属性。这种操作下哪怕调用了组件的refresh方法，也容易出现选中状态不同步，最终表现为旧值不显示、只展示新选中值的问题。
  正确的执行顺序应当为：先完成原生select的选中值匹配设置，最后再初始化multiselect组件；如果组件已经提前初始化完成，不要手动操作原生DOM的selected属性，直接调用组件自带的设置方法传入选中数组，就能避免状态不同步。
• 原赋值逻辑的健壮性不足
  你当前的赋值逻辑是循环逐个匹配option加选中属性，存在两个容易踩的坑：
  • 没有先清空原有选中状态，容易出现选中值残留的状态混乱
  • 没有做值类型匹配，option的value是字符串类型，如果传入的已选数组是数字类型，选择器会匹配不到对应option，静默丢失选中状态
    可以把赋值方法优化为统一值类型、先清空选中状态再批量匹配的逻辑，匹配完成后再调用组件刷新方法。

优化后的参考代码 #

1. 修正后的HTML结构

<div class="col-lg-6">
  <div class="form-group">
    <label>Ahli-ahli <?php echo $span_mandatory; ?></label><br>
    <select id="ahli_ahli" name="ahli_ahli" class="form-control <?php echo $class_mandatory; ?>" title="Ahli-ahli" multiple>
      <?php
      $sql_user = 'SELECT * FROM user where is_active=1';
      $row_user = base_mysqli_select($sql_connection, $sql_user, $types, $values);
      foreach ($row_user as $val_user) {
        echo '<option value="' . $val_user['id'] . '">' . $val_user['name'] . '</option>';
      }
      ?>
    </select>
  </div>
</div>

2. 优化后的回显逻辑

function call_to_set_Selected(ahli_ahli) {
  // 清空原有选中状态，避免残留
  $('#ahli_ahli option').prop('selected', false);
  // 统一转换为字符串类型，和option的value属性对齐
  const selectedList = ahli_ahli.map(item => String(item));
  // 批量匹配选中
  $('#ahli_ahli option').each(function() {
    if (selectedList.includes(String($(this).val()))) {
      $(this).prop('selected', true);
    }
  });
  // 状态设置完成后再刷新组件
  $('#ahli_ahli').multiselect('refresh');
}

3. 组件初始化时机调整
   不要在页面加载完成后无条件立刻初始化组件，如果需要异步拉取回显数据，要等回显值设置完成后再执行组件初始化：

// 接口拉取旧表单数据完成后执行
function initForm() {
  const oldFormData = getFormDataFromServer(); // 本地获取旧数据的方法
  call_to_set_Selected(oldFormData.ahli_ahli); // 先设置原生select的选中值
  // 最后初始化多选组件
  $('#ahli_ahli').multiselect({
    nonSelectedText: 'Pilih ahli-ahli',
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    buttonWidth:'100%'
  });
}

补充提示：如果组件已经提前完成初始化，不要手动操作原生DOM的选中属性，直接调用组件内置的select方法传入选中数组即可，这种方式的状态同步效率远高于手动操作DOM后刷新。

内容的提问来源于stack exchange，提问作者Pi Network Crytocurrency