如何验证jQuery MultiSelect多选框是否有选项被选中？

我之前也用过这款MultiSelect插件，碰到过一模一样的验证问题。其实核心要搞懂：这个插件只是把原生的<select multiple>包装成了更美观的UI组件，但实际的选中状态会自动同步回原生的select元素——也就是说，你看到的那些自定义复选框，最终都会映射到原生select的option选中状态上。所以我们完全不需要去操作插件生成的那些额外DOM，直接针对原生select做验证就够了。

正确的验证代码示例 #

先看完整的实现，包含插件初始化和验证逻辑：

<select multiple id="selectbox">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
<input type="button" value="validate" id="btn"/>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.multiSelect.js"></script>
<script>
$(document).ready(function () {
  // 初始化MultiSelect插件
  $('#selectbox').multiSelect();

  // 绑定验证按钮的点击事件
  $('#btn').click(function() {
    // 获取原生select中被选中的option数量
    var selectedItems = $('#selectbox option:selected');
    if (selectedItems.length === 0) {
      alert('请至少选择一个选项！');
      // 这里可以添加自定义的提示样式，比如给插件容器加红色边框等
    } else {
      alert(`已选择 ${selectedItems.length} 个选项，验证通过！`);
      // 这里可以执行表单提交或其他后续逻辑
    }
  });
});
</script>

关键逻辑说明 #

• 插件运行后，原生的<select>元素会被设置为display: none，但它并没有被移除，jQuery依然可以正常选中它。
• 使用$('#selectbox option:selected')可以直接获取所有被选中的原生option元素，通过length属性就能判断是否有选项被选中。
• 这种方式比操作插件生成的DOM更可靠，因为插件本身会维护原生select和UI组件的状态同步，不会出现状态不一致的问题。

表单提交时的验证场景 #

如果是在表单提交时做验证，只需要把逻辑放到表单的submit事件里即可：

$('form').on('submit', function(e) {
  var selectedCount = $('#selectbox option:selected').length;
  if (selectedCount === 0) {
    alert('请至少选择一个选项！');
    e.preventDefault(); // 阻止表单提交
  }
});

内容的提问来源于stack exchange，提问作者Teshan N.