如何获取和设置Bootstrap多选下拉列表的值？现有代码无效求助

看起来你遇到的核心问题是：你用的是**Bootstrap Select（selectpicker）**插件，而非原生HTML多选下拉框——直接操作原生DOM元素后，插件并不会自动同步更新UI状态，所以你的代码看起来没起作用。下面给你一套完整的解决方案：

第一步：确保依赖资源齐全 #

首先要确认你已经引入了Bootstrap Select的CSS和JS文件（只引入jQuery是不够的），比如：

<!-- 先引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<!-- 再引入Bootstrap Select CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

<!-- jQuery（你已经引入了） -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap Select JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

第二步：完整的jQuery操作代码 #

把你的逻辑改成适配Bootstrap Select的写法，并且要在DOM加载完成后执行：

$(document).ready(function() {
  // 模拟从数据库获取的字符串
  var values = "Test,Prof,Off"; 
  var splitValues = values.split(','); 
  var $select = $('#DDLSKills');

  // 1. 清空下拉框原有选项（可选，根据需求）
  $select.empty();

  // 2. 向下拉框添加选项
  splitValues.forEach(function(skill) {
    $select.append($('<option>', {
      value: skill,
      text: skill // 如果需要显示的文本和值不同，可以修改这里
    }));
  });

  // 3. 初始化Bootstrap Select插件
  $select.selectpicker();

  // 4. 设置选中的选项
  $select.selectpicker('val', splitValues);

  // 5. 刷新插件，确保UI同步更新
  $select.selectpicker('refresh');
});

关键说明 #

• 为什么你的原代码无效？因为Bootstrap Select会把原生的<select>隐藏，生成自己的UI组件，直接操作原生options不会同步到插件的UI上，必须调用插件提供的方法（比如selectpicker('val')和selectpicker('refresh')）。
• 如果你的下拉框已经提前初始化过，不需要重复调用selectpicker()，直接用refresh方法即可。
• 如果你需要从数据库获取更复杂的结构（比如值和显示文本不同），只需要修改append部分的value和text参数即可。

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