如何在Eric Hynds的jQuery UI MultiSelect初始化时设置默认选中项（非HTML方式）

要实现从数据库获取选中值并初始化jQuery UI MultiSelect Widget的默认选中状态，你可以按照以下步骤操作：

• 第一步：解析数据库返回的选中值
  你拿到的PreSelectedValuesDatabase是逗号加空格分隔的字符串，首先需要把它分割成一个值数组，这样才能正确匹配多选框的选项值。

• 第二步：初始化多选框并设置选中状态
  初始化multiselect组件后，调用插件提供的select方法，把解析后的数组传进去，就能让对应的选项自动处于选中状态。另外也可以先给原生<select>元素设置选中值，再调用multiselect('refresh')同步插件状态，两种方式都能达到效果。

下面是修改后的完整代码示例：

// 解析数据库返回的字符串，分割为选中值数组
var PreSelectedValuesDatabase = "Material in alternative formats (e.g., large print, Braille, e-text):Periodic, Accessible building access (e.g., keyless entry, accessible parking):Periodic, Ergonomics Assessment:Permanent";
var selectedValues = PreSelectedValuesDatabase.split(', ');

// 初始化多选框组件
$("#GroupDropDown").multiselect({
    height:500,
    minWidth:500,
    selectedList:false,
    open: function(event, ui){
        console.log(event);
    },
    close: function(event, ui){
        var values = $(this).val();
    }
});

// 批量设置默认选中状态
$("#GroupDropDown").multiselect('select', selectedValues);

你也可以选择先给原生select赋值再初始化/刷新组件的方式：

var selectedValues = PreSelectedValuesDatabase.split(', ');

// 先给原生select设置选中值
$("#GroupDropDown").val(selectedValues);

// 初始化组件并同步状态
$("#GroupDropDown").multiselect({
    height:500,
    minWidth:500,
    selectedList:false,
    open: function(event, ui){
        console.log(event);
    },
    close: function(event, ui){
        var values = $(this).val();
    }
}).multiselect('refresh');

注意事项 #

• 一定要确保分割字符串的分隔符和数据库返回的格式完全一致，你的例子里是逗号加空格, ，如果用纯逗号分割会导致选项值带空格，无法匹配到正确的选项。
• 插件的select方法支持单个值或值数组传入，非常适合批量设置选中状态。

内容的提问来源于stack exchange，提问作者Karim Ali