Select2 4.0.3的S2MultiCheckboxes扩展tokenSeparators配置不生效如何解决

配置不生效的核心原因 #

• 对tokenSeparators参数的作用存在认知偏差：该参数仅用于在搜索输入框输入时，自动将输入内容按指定分隔符拆分为多个候选选项/标签，不负责控制最终选中值的输出分隔格式。
• 你使用的S2MultiCheckboxes插件会保留目标元素的multiple原生属性，浏览器对多选<select>元素的val()默认返回选中值的数组，直接转字符串时会默认用逗号拼接，和Select2的配置无关联。
• 插件重写了选择事件、选中结果模板等核心逻辑，本身没有调用tokenSeparators参数处理输出格式，因此传入的配置不会生效。
• 额外补充：你测试的其他配置无效的原因：separator是Select2 3.x版本的废弃参数，4.0+版本不再支持；tags:true是开启自定义新增标签功能，和输出分隔符无关。

解决方案 #

场景1：仅需要在代码中获取竖线分隔的选中值 #

直接对返回的选中值数组做手动拼接即可，代码示例：

// 替换targetSelect为你的下拉框元素ID
const selected = $('#targetSelect').val();
const formattedResult = selected ? selected.join('|') : '';
// 直接使用formattedResult即可

场景2：需要表单提交时默认返回竖线分隔的字符串 #

可以监听下拉框的change事件，同步将拼接后的值存入隐藏域随表单提交，示例：

<!-- 在对应表单内新增隐藏域 -->
<input type="hidden" name="selectResult" id="selectResult">

$('#targetSelect').on('change.select2', function() {
  const selected = $(this).val();
  $('#selectResult').val(selected ? selected.join('|') : '');
});

表单提交时直接取selectResult字段的值即可。

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