Javascript 当值与显示值不一致时，在标签上选择2错误

假设我有这个选择框：

<select id="example" multiple="multiple" style="width: 300px">
    <option selected value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

问题是，当键入完整的月份名称，如“一月”，然后按空格键，而不是选择现有的“一月”选项（这是我所期望的），它只会创建一个值为

January

的新标记

---

经过反复测试，我发现实际值与显示值不一致时才会出现这种情况。有没有办法让这两个值保持不同，但让它选择“已存在”选项？

试试这个

删除标签选项，因为它将动态创建新标签

---

通过搜索匹配项，使用

createTag

事件

如果没有匹配项，并且您不想添加新标记，只需返回

null

：

var options = $('#example option');

$('#example').select2({
  placeholder: 'Select a month',
  tags: true,
  tokenSeparators: [',', ' '],
  createTag: function(params) {    
    var matchedVal = options.filter(function () { return $(this).html() === params.term; }).val();    
    return (matchedVal) ? { id: matchedVal, text: params.term } : null
  }
});

演示：

编辑：

根据您的注释，如果标签不存在，您希望创建该标签-请改用此

return

语句：

return (matchedVal) ? { id: matchedVal, text: params.term } : { id: params.term, text: params.term }

---

创建不匹配的标签演示：

@cytsny接受答案，如果它对你有用。谢谢你，我需要它来动态创建标签。我只是不想在标签一开始就已经存在时创建它。最糟糕的是，即使我不需要标签功能，按空格键仍然无法选择现有选项。我想你需要某种类型的

一月

和'一月`你只想

一月

被选中。所以你们可以过滤选项中的结果，忽略不需要的那个一个。我确实想在并没有匹配项时创建标记。我只是不想在有匹配项时添加标记。介意编辑一下你的答案吗？我想你接近赏金了。（即，如果我想添加标签，我应该返回什么？）标记为正确答案。为了奖励赏金，stackoverflow锁定了函数。解锁前需要再等待9个小时。

var options = $('#example option');

$('#example').select2({
  placeholder: 'Select a month',
  tags: true,
  tokenSeparators: [',', ' '],
  createTag: function(params) {    
    var matchedVal = options.filter(function () { return $(this).html() === params.term; }).val();    
    return (matchedVal) ? { id: matchedVal, text: params.term } : null
  }
});

return (matchedVal) ? { id: matchedVal, text: params.term } : { id: params.term, text: params.term }