jquery select2-templateResult显示多个项目的selected true

Question

我使用的是jquery-select2(4.0.0(。问题是当我选择一个选项，然后选择另一个选项项时。selected对这两个选项都保持正确-永远。是否有一些我缺少的初始配置选项，或者这是一个错误？

function formatResult(item) {
  console.log("item selected = ", item.selected);
  return item.text;
}
$('select').select2({
  templateResult: formatResult,
  minimumResultsForSearch: Infinity,
  placeholder: "Please choose",
  multiple: false,
  maximumSelectionSize: 1
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<select>
  <option></option>
  <option>conan</option>
  <option>kimmel</option>
  <option>stewart</option>
  <option>colbert</option>
</select>

Answer 1

我应该先说item.selected(数据对象的selected属性(没有文档化，将来会更改。为什么我说会？因为这个错误只发生在单选元素上(如最后所解释的(，但您现在可以放心地忽略它。

目前，item.selected属性仅由Select2用于<input />元素，而item.element.selected属性用于<select>元素。当使用<select>元素时，这将始终是真相的来源，因为item.element是对<option>元素的引用，浏览器使用该元素来确定应向服务器发送哪些数据。

查看item.element.selected后，您可以看到，当选择发生更改时，它会正确更新。

function formatResult(item) {
  console.log("item selected = ", item.selected);
  console.log("item.element.selected = ", item.element && item.element.selected);
  return item.text;
}
$('select').select2({
  templateResult: formatResult,
  minimumResultsForSearch: Infinity,
  placeholder: "Please choose",
  multiple: false,
  maximumSelectionSize: 1
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<select>
  <option></option>
  <option>conan</option>
  <option>kimmel</option>
  <option>stewart</option>
  <option>colbert</option>
</select>

是的，item.selected属性将来会被固定，所以它是准确的。现在它没有更新，因为在一次选择中，会选择新选项，而这些选项会隐式取消选择旧选项。这与多选不同，多选是显式选择和取消选择选项。