如何用jQuery在页面刷新后保留并显示多选下拉框的用户选中值

问题说明 #

我有一个通过jQuery动态加载选项的Selectize多选下拉框，用户可选择多个选项，但页面刷新后选中值全部丢失。已将选中值存储到KA2Val数组中，但使用$('#multiLevelDropdown').val(KA2Val)无法恢复选中状态。

相关代码 #

HTML结构

<div id="keyAcct2">
 <select class="form-control rich-selectize" id="multiLevelDropdown" name="multiLevelDropdown" placeholder="" multiple></select>
</div>

原选项加载函数

function LoadmultiLevelDropdown (KeyLevel2s){
 $('#multiLevelDropdown').empty();
 $('#multiLevelDropdown')[0].selectize.clearCache('option');
 $('#multiLevelDropdown')[0].selectize.clearOptions();
 var keyLevel2Ids = [];
 if (KeyLevel2s.length > 0){
  $.each(KeyLevel2s, function (index, item){
   if(keyLevel2Ids.indexOf(item.KeyAccountLevel2Id) === -1){
    $('#multiLevelDropdown')[0].selectize.addOption([{ text: $.trim(item.KeyAccountLevel2Desc), value: item.KeyAccountLevel2Desc }]);
    keyLevel2Ids.push(item.KeyAccountLevel2Id);
   }
  });
 }
 // 尝试恢复选中状态但无效
 // $('#multiLevelDropdown').val(KA2Val); 
}

解决方案 #

因为你使用的是Selectize插件，而非原生<select>元素，直接调用jQuery的val()方法无法生效，必须使用Selectize自身的API来设置选中值：

1. 获取Selectize实例：通过$('#multiLevelDropdown')[0].selectize获取已初始化的Selectize对象
2. 使用setValue()方法设置选中值：该方法支持传入数组（对应多选场景），且会自动匹配选项的value字段

修改后的LoadmultiLevelDropdown函数如下：

function LoadmultiLevelDropdown (KeyLevel2s){
 $('#multiLevelDropdown').empty();
 $('#multiLevelDropdown')[0].selectize.clearCache('option');
 $('#multiLevelDropdown')[0].selectize.clearOptions();
 var keyLevel2Ids = [];
 if (KeyLevel2s.length > 0){
  $.each(KeyLevel2s, function (index, item){
   if(keyLevel2Ids.indexOf(item.KeyAccountLevel2Id) === -1){
    $('#multiLevelDropdown')[0].selectize.addOption([{ text: $.trim(item.KeyAccountLevel2Desc), value: item.KeyAccountLevel2Desc }]);
    keyLevel2Ids.push(item.KeyAccountLevel2Id);
   }
  });
 }

 // 恢复选中状态：确保KA2Val数组中的值与选项的value完全匹配
 if (KA2Val && KA2Val.length > 0) {
   $('#multiLevelDropdown')[0].selectize.setValue(KA2Val, false); 
   // 第二个参数设为false：不触发change事件（可选，根据需求调整）
 }
}

注意事项 #

• 确保KA2Val数组中的每个值，与你添加选项时设置的value（即item.KeyAccountLevel2Desc）完全一致，包括空格、大小写
• 必须在选项加载完成后调用setValue()，否则Selectize无法找到对应的选项
• 如果不需要触发选中后的change事件，将setValue的第二个参数设为false；反之设为true（默认是true）

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