如何为已填充数据的multi-select picker设置数据库返回的多选中值？

嘿，我来帮你搞定这个问题！看你的代码，你用的是Bootstrap Select插件对吧？要把从数据库拿到的多个值设为选中状态，其实分两步就搞定：

第一步：先确保下拉框已经填好选项 #

不管你是后端渲染页面的时候直接把选项写进去，还是用AJAX动态拉取填充，得先让DDLSkills里有完整的技能选项。比如后端渲染的话大概是这样：

<select id="DDLSkills" name="selValue" data-live-search="true" data-style="btn-default form-control" class="selectpicker form-control" data-size="5" multiple data-max-options="2">
  <option value="1">JavaScript</option>
  <option value="2">Python</option>
  <option value="3">Java</option>
  <option value="4">CSS</option>
</select>

如果是AJAX动态填充的，填充完之后一定要调用$('#DDLSkills').selectpicker('refresh')，不然插件认不到新选项哦。

第二步：设置选中值 #

假设你从数据库拿到的选中值是个数组，比如['2', '4']（对应Python和CSS的value），有两种方式可以设置：

方式一：前端动态设置（适合AJAX获取数据的场景） #

// 这是从数据库取到的选中值数组，替换成你实际的数据就行
const selectedSkills = ['2', '4'];

// 先清空之前的选中状态（可选，防止有残留）
$('#DDLSkills').val([]);
// 设置新的选中值
$('#DDLSkills').val(selectedSkills);
// 重点！通知插件更新UI，不然选中状态不会显示出来
$('#DDLSkills').selectpicker('refresh');

方式二：后端渲染时直接标记（适合页面加载时就拿到数据的场景） #

如果你的页面是后端模板渲染的（比如PHP、ASP.NET这些），可以直接在对应的<option>上加上selected属性：

<select id="DDLSkills" name="selValue" data-live-search="true" data-style="btn-default form-control" class="selectpicker form-control" data-size="5" multiple data-max-options="2">
  <option value="1">JavaScript</option>
  <option value="2" selected>Python</option>
  <option value="3">Java</option>
  <option value="4" selected>CSS</option>
</select>

然后页面加载完成后初始化插件（如果没自动初始化的话）：

$(document).ready(function() {
  $('#DDLSkills').selectpicker();
});

几个要注意的小细节 #

• 一定要保证你从数据库拿的value和下拉框选项的value完全匹配，包括是字符串还是数字，差一点都不行哦
• 如果是AJAX拿数据，一定要等数据返回之后再执行设置选中值的代码，不然下拉框还没填充好，设置了也白搭
• 设置完之后别忘了调用selectpicker('refresh')，这是Bootstrap Select更新UI的关键，很多人就是漏了这一步才出问题的

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