如何为多个Bootstrap Selectpicker分别设置选中值？

嘿，我来帮你搞定这个困扰！Bootstrap Selectpicker是基于原生select的增强组件，设置选中值的时候得注意组件的初始化时机和正确的API调用，下面给你分步讲清楚怎么分别给两个选择器设置选中值：

核心前提 #

首先一定要确保你是在Selectpicker组件初始化完成之后再执行设置选中值的代码，不然DOM还没渲染好，操作肯定无效。

方法一：直接使用组件专属API（推荐） #

Selectpicker提供了专门的val方法，直接调用就能设置选中值，还会自动刷新组件UI，不用额外操作：

// 给第一个选择器（id: firstPicker）设置目标选中值
$('#firstPicker').selectpicker('val', '你要选中的option的value值');

// 给第二个选择器（假设id为secondPicker）设置目标选中值
$('#secondPicker').selectpicker('val', '另一个option的value值');

方法二：原生select赋值 + 组件刷新 #

如果你习惯操作原生select元素，可以先给原生select设置值，再调用refresh方法让Selectpicker同步更新UI：

// 设置第一个选择器
$('#firstPicker').val('目标value').selectpicker('refresh');

// 设置第二个选择器
$('#secondPicker').val('目标value').selectpicker('refresh');

避坑指南 #

• 值必须完全匹配：你要设置的value必须和<option>标签里的value属性完全一致，包括大小写、空格，比如<option value="Apple">苹果</option>，不能写成'apple'，必须是'Apple'
• 动态选项要先加载：如果你的<option>是通过AJAX动态生成的，一定要等选项全部渲染到DOM里，再初始化Selectpicker，最后设置选中值
• 避开disabled默认选项：你代码里有个<option selected disabled value="default">，设置的时候不要把目标值设成这个disabled的value，不然无法选中

完整示例 #

假设你的完整HTML是这样的：

<div class="form-group col-md-6 col-lg-6 col-sm-6">
  <select id="firstPicker" name="selValue" class="form-control selectpicker">
    <option selected disabled value="default">请选择</option>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
  </select>
</div>
<div class="form-group col-md-6 col-lg-6 col-sm-6">
  <select id="secondPicker" name="selValue2" class="form-control selectpicker">
    <option selected disabled value="default">请选择</option>
    <option value="optA">选项A</option>
    <option value="optB">选项B</option>
  </select>
</div>

对应的JS代码（要放在DOM加载完成的回调里）：

$(document).ready(function() {
  // 初始化所有selectpicker组件（如果没自动初始化的话）
  $('.selectpicker').selectpicker();

  // 分别设置两个选择器的选中值
  $('#firstPicker').selectpicker('val', 'option2');
  $('#secondPicker').selectpicker('val', 'optA');
});

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