Select2多选选择器tokenSeparators属性失效问题求助

你的问题出在两个核心点上：

• Select2 4.x版本已废弃separator配置项，只需保留tokenSeparators: [';']即可，这个配置是用来触发输入时创建新标签的分隔符。
• 你用alert($('.test').val())看到的逗号，并非Select2的问题——val()方法返回的是选中项的数组，JavaScript默认会用逗号将数组转为字符串，和Select2的设置无关。

修正后的代码 #

CSS代码

#test{margin:55px;display:block;}

HTML及JS代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select multiple class="form-control test res_comment set_services">
<option data-trener="13" data-price="10.00" value="Trener 13">Trener 13</option>
<option data-trener="14" data-price="10.00" value="Trener 14">Trener 14</option>
<option data-trener="15" data-price="10.00" value="Trener 15">Trener 15</option>
<option data-trener="16" data-price="10.00" value="Trener 16">Trener 16</option>
</select>

<a id="test" href="#">TEST</a>
<script>
$('.test').select2({
 minimumResultsForSearch: '',
 tags: true,
 allowClear:true,
 tokenSeparators: [';'], // 仅保留该配置即可
 insertTag: function (data, tag) {
 // Insert the tag at the end of the results
 data.push(tag);
 },
 placeholder: 'select'
});

$('#test').click(function(){
 // 将数组转为分号分隔的字符串
 alert($('.test').val().join(';'));
})
</script>

关键说明 #

1. tokenSeparators的作用：在Select2输入框中输入内容并按下分号时，会自动将当前内容创建为新标签，这是控制输入分隔逻辑的正确配置。
2. 获取分号分隔的字符串：由于val()返回的是数组，必须手动调用join(';')方法，将数组元素用分号拼接成目标格式的字符串。

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