jQuery Multiselect插件：数据库取回数据无法自动勾选匹配选项求助

我之前也踩过这个插件的回显坑，其实核心就是要在插件准备好之后，用它提供的API来匹配数据库返回的已选值就行。下面分两种常见场景给你具体方案：

场景一：先填充原生select选项，再初始化插件回显 #

如果你的流程是先通过接口把选项加载到原生<select>标签里，再初始化Multiselect插件，那可以这么做：

// 示例：AJAX获取选项数据并填充到select
$.get('/api/get-options', function(optionsData) {
  const $targetSelect = $('#your-multiselect-id');
  // 循环插入选项到原生select
  optionsData.forEach(opt => {
    $targetSelect.append(`<option value="${opt.value}">${opt.label}</option>`);
  });
  // 初始化Multiselect插件
  $targetSelect.multiSelect({
    // 这里放你的插件配置，比如selectAllText: '全选', noneSelectedText: '请选择'
  });

  // 假设savedValues是从数据库取回的已选值数组，比如['2', '4', '5']
  const savedValues = ['2', '4', '5'];
  // 调用插件的select方法，传入值数组完成回显
  $targetSelect.multiSelect('select', savedValues);
});

场景二：用插件的loadOptions方法加载选项并同时回显 #

你提到插件有loadOptions功能，这个方法可以直接加载结构化的选项数据，我们只需要在数据里给已选的选项标记selected: true即可：

const $targetSelect = $('#your-multiselect-id');
// 先初始化插件（可以先不带配置，之后再调整）
$targetSelect.multiSelect();

// 示例：同时获取所有选项和已选数据
$.get('/api/get-options-and-saved', function(res) {
  const allOptions = res.allOptions; // 格式：[{value: '1', label: '选项1'}, ...]
  const savedValues = res.savedValues; // 已选值数组：['1', '3']

  // 给已选中的选项添加selected标记
  const processedOptions = allOptions.map(opt => ({
    value: opt.value,
    text: opt.label,
    selected: savedValues.includes(opt.value)
  }));

  // 用loadOptions加载选项，插件会自动选中标记了selected的项
  $targetSelect.multiSelect('loadOptions', processedOptions);
});

几个关键注意点 #

• 一定要保证savedValues里的值和选项的value属性完全匹配（包括数据类型，比如别把数字1和字符串'1'搞混），不然插件识别不到。
• 如果你的原生<select>在页面加载时就已经给已选选项加了selected="selected"属性，那插件初始化时会自动识别并选中，这种情况不需要额外调用方法。
• 如果是后期动态更新选中状态，除了select方法，还可以用refresh方法强制渲染，但一般select方法会自动触发刷新。

我自己用这个插件的时候，第一种场景用得最多，只要确保在插件初始化完成后再调用select方法传已选值数组，就能完美实现回显了。

内容的提问来源于stack exchange，提问作者Teshan N.