如何获取Chosen插件多选下拉框的选中值？

别着急，我来帮你搞定这个问题！其实Chosen插件完全兼容jQuery原生操作，还有自带的方法可以用，结合你的代码场景，我给你一步步拆解：

先确认你的下拉框基础设置 #

首先要确保你的<select>标签加上了multiple属性，不然Chosen没法启用多选功能，比如：

<select multiple data-placeholder="请选择选项..." class="chosen-select">
  <option value="opt1">选项1</option>
  <option value="opt2">选项2</option>
  <option value="opt3">选项3</option>
</select>

另外，一定要把Chosen的初始化代码放在$(document).ready()里，确保DOM加载完成后再初始化：

$(document).ready(function() {
  $('.chosen-select').chosen({
    width: '250px' // 可选，设置下拉框宽度
  });
});

方法一：用原生jQuery直接获取（最简单） #

Chosen会同步原生<select>的选中状态，所以直接用jQuery的val()方法就能拿到选中值，多选情况下返回的是数组：

// 获取选中值数组
var selectedValues = $('.chosen-select').val();
console.log(selectedValues); // 输出示例：["opt1", "opt3"]

如果需要获取选中的文本内容，可以遍历选中的<option>标签：

var selectedTexts = [];
$('.chosen-select option:selected').each(function() {
  selectedTexts.push($(this).text());
});
console.log(selectedTexts); // 输出示例：["选项1", "选项3"]

方法二：结合Chosen的事件监听（实时获取变化） #

如果你需要在用户选中/取消选项时实时获取值，可以监听change事件（Chosen会触发原生的change事件，也可以用插件自带的chosen:change事件）：

$('.chosen-select').on('change', function() {
  var currentSelected = $(this).val();
  console.log('当前选中值：', currentSelected);
});

要是你动态修改了下拉框的选项（比如新增/删除选项），记得触发chosen:updated事件同步Chosen的状态，之后再获取值才准确：

// 新增一个选项
$('.chosen-select').append('<option value="opt4">选项4</option>');
// 同步Chosen状态
$('.chosen-select').trigger('chosen:updated');
// 此时再获取值就是最新的
var selectedValues = $('.chosen-select').val();

完整示例代码 #

把上面的内容整合到你的代码里，完整示例如下：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
  <link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>
</head>
<body>
  <select multiple data-placeholder="请选择选项..." class="chosen-select">
    <option value="opt1">选项1</option>
    <option value="opt2">选项2</option>
    <option value="opt3">选项3</option>
  </select>
  <button onclick="getSelected()">点击获取选中值</button>

  <script>
    $(document).ready(function() {
      $('.chosen-select').chosen({
        width: '250px'
      });
    });

    function getSelected() {
      // 获取选中值数组
      var selectedVals = $('.chosen-select').val();
      // 获取选中文本数组
      var selectedTexts = [];
      $('.chosen-select option:selected').each(function() {
        selectedTexts.push($(this).text());
      });
      console.log('选中值：', selectedVals);
      console.log('选中文本：', selectedTexts);
      alert('选中值：' + (selectedVals ? selectedVals.join(', ') : '无') + '\n选中文本：' + (selectedTexts ? selectedTexts.join(', ') : '无'));
    }
  </script>
</body>

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