Select2多选限制问题：.group类组件最大选择数配置失效

嘿，我看你在给Select2组件设置最大选择数的时候踩坑了，咱们来把这个问题捋清楚～

问题出在哪？ #

你当前的JS写法有两个核心问题：

• maximumSelectionSize是初始化配置，不是事件里的设置项：这个参数是Select2初始化时就要传入的核心配置，不能在select2:opening事件里零散写个键值对，根本不会被组件识别。
• 事件绑定的写法错误：select2:opening事件是直接触发在Select2组件元素上的，你用.on('select2:opening', '.group', ...)这种事件委托的方式，相当于监听.js-select2元素的子元素触发的事件，这完全不符合Select2事件的触发逻辑。

另外补充个小细节：Select2 4.x版本之后，这个参数改名叫maximumSelectionLength了，旧版本才是maximumSelectionSize，记得根据你的组件版本调整。

正确的解决方案（推荐直接初始化配置） #

最可靠的方式是针对不同类的组件分开初始化，直接传入对应配置：

// 给.group类的Select2设置最大选择数为1
$('#mdlCreateNewArticle .js-select2.group').select2({
  maximumSelectionLength: 1 // 如果你用的是旧版Select2，改成maximumSelectionSize: 1
});

// 给.systemComponents类的Select2保持默认多选配置
$('#mdlCreateNewArticle .js-select2.systemComponents').select2();

这种方式是Select2官方推荐的配置方式，逻辑清晰，也不会有事件拦截的漏洞。

如果你非要用事件拦截的方式（不推荐） #

如果因为某些原因必须用事件来限制，那得修正事件绑定的写法，直接绑定到.group组件上：

// 先统一初始化所有Select2
$('#mdlCreateNewArticle .js-select2').select2();

// 给.group组件绑定打开事件，已选1个就阻止下拉展开
$('#mdlCreateNewArticle .js-select2.group').on('select2:opening', function(e) {
  // 注意用$(this)指代当前触发事件的组件，不要用全局的.group选择器
  if ($(this).select2('data').length >= 1) {
    e.preventDefault();
  }
});

不过这种方式有局限性：用户可能通过键盘输入、粘贴等方式绕过下拉框选择，不如初始化配置彻底。

额外确认 #

你的Razor代码里用ListBoxFor是没问题的，因为它本身支持多选，Select2会接管它的多选逻辑，不需要额外调整。

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