如何将 select2 多选控件分隔符更改为分号？答案

【问题标题】：How to change select2 multiselect control's delimiter to semi-colon?如何将 select2 多选控件分隔符更改为分号？
【发布时间】：2016-09-14 19:55:34
【问题描述】：

我正在尝试在 MultiSelect 控件上使用 Select2 jQuery 库。控件工作正常，但我需要更改 select2 用于多选控件的值的默认分隔符（分隔符）。

目前从多选控件的值中检索值的输出是comma，而我需要它是semi-colon 分隔值，如何做到这一点？

$("#btn").click(function(e) {
  e.preventDefault();

  $("#result").text('Output: ' + $("#example1").select2("val"));
});

$("#example1").select2({
  seperator: ";"
});

#btn {
  margin: 20px 0px;
}
#result {
  margin: 20px 0px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.js"></script>

<select id="example1" placeholder="Select ..." class="" style="width:100%;" multiple="multiple">
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
  <option value="Option 4">Option 4</option>
  <option value="Option 5">Option 5</option>
  <option value="Option 6">Option 6</option>
</select>
<input type="button" id="btn" value="Click Me" />
<div id="result">Output:
</div>

【问题讨论】：

标签： jquery multi-select select2

【解决方案1】：

由于您提到您的选项值可能包含逗号，因此我的原始答案将不起作用。试试这个（出于演示目的，我在您的选项值中添加了逗号）：

$("#result").text('Output: ' + $("#example1").select2("val").join(';'));

$("#btn").click(function(e) {
  e.preventDefault();
  $("#result").text('Output: ' + $("#example1").select2("val").join(';'));
});

$("#example1").select2();

#btn {
  margin: 20px 0px;
}
#result {
  margin: 20px 0px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.js"></script>

<select id="example1" placeholder="Select ..." class="" style="width:100%;" multiple="multiple">
  <option value="Option, 1">Option 1</option>
  <option value="Option, 2">Option 2</option>
  <option value="Option, 3">Option 3</option>
  <option value="Option, 4">Option 4</option>
  <option value="Option, 5">Option 5</option>
  <option value="Option, 6">Option 6</option>
</select>
<input type="button" id="btn" value="Click Me" />
<div id="result">Output:
</div>

【讨论】：

是的，这就是我寻找替换 comma 的原因，因为它是数据库中值的一部分。
好的。我注意到在您的示例中，您拼写了“分隔符”不正确，但即使已修复，您的示例仍然无法按预期工作，目前我不确定为什么。如果我看到任何其他内容，我会告诉你的。
看来实际上没有必要先拆分$("#example1").select2("val")，所以我相应地修改了我的答案。请试一试。出于演示目的，我还在您的选项值中添加了逗号，它按预期工作。