编辑状态下如何设置jQuery Multiselect选中并显示对应值

你的代码核心问题是组件初始化顺序错误，并且设置选中状态的方式不够严谨，导致选中值无法同步到组件UI。以下是修正后的实现方案：

修正思路 #

1. 先完成Multiselect组件的初始化，确保组件已绑定到目标select元素
2. 清空现有选中状态（按需）
3. 用更可靠的方式设置option选中状态，或直接调用组件自带的选中方法
4. 刷新组件UI，让选中状态同步显示

方案一：通过操作option属性实现 #

// 1. 先初始化Multiselect组件
$('#Nationality').multiselect({
    columns: 1,
    placeholder: 'Select Nationality',
    search: true,
    selectAll: true
});

// 2. 清空已有选中
$("#Nationality").multiselect("clearSelection");

// 3. 拆分目标值数组并设置选中
var myarray = nationalties.split(',');
for (var i = 0; i < myarray.length; i++) {
    // 使用prop()设置选中状态，比attr()更适合布尔类型的DOM属性
    $('#Nationality').find('option[value="' + myarray[i] + '"]').prop("selected", true);
}

// 4. 刷新组件，同步UI显示
$("#Nationality").multiselect('refresh');

方案二：直接调用组件自带的select方法（更简洁） #

Multiselect组件提供了select方法，可以直接传入值数组批量选中，无需手动操作option：

// 初始化组件
$('#Nationality').multiselect({
    columns: 1,
    placeholder: 'Select Nationality',
    search: true,
    selectAll: true
});

// 清空选中
$("#Nationality").multiselect("clearSelection");

// 批量选中目标值
var myarray = nationalties.split(',');
$("#Nationality").multiselect("select", myarray);

原代码问题说明 #

• 你先操作option的选中状态，再初始化组件，组件初始化时会读取当时的option状态，但后续的操作没有同步到组件实例
• 使用attr("selected", "selected")不够严谨，jQuery中对于selected这类布尔型DOM属性，推荐用prop("selected", true)来设置，更符合DOM属性的操作规范

内容的提问来源于stack exchange，提问作者athira sivan