多个选择框使用选择具有相同的值

Question

有没有办法创建多个选择框，使用Chosen插件或Select2填充相同的值。

条件：

1. 所有选择框都应具有相同的值
2. 每个选择框单选
3. 在所有选择框中都不能选择两次选项（例如：A，B，C ..是选项，其中A只能选择一次）
4. 可以在选择框中添加自定义值的选项，该选项框将更新为所有选择框
5. 在其余的选择框中禁用所选值

Answer 1

所以，这里有几个问题，我将为所有这些问题单独给出答案。请注意，我是Select2的维护者，所以我的所有答案都是针对Select2的。有些将适用于选择，但我无法保证。

完整的代码可以在这个答案的底部找到，作为一个完整的可运行的Stack Snippet。如果可用，问题下方会包含个别摘要。

1. 所有选择框都应具有相同的值

这是你应该能够在没有Select2或Chosen的情况下做的事情，因为这是将一个<select>的内容克隆到其余部分的问题。这可以很简单

$("select").html($(".main-select").html());

这将确保所有<select>框具有与main-select类相同的选项。

2. 每个选择框单选

Select2和Chosen都会根据您是否在multiple上指定<select>属性来确定是否允许多个选择。所以这里的简单解决方案是永远不要包含它，所有选择框只允许一次选择。

3. 在所有选择框中都不能选择两次选项（例如：A，B，C ..是选项，其中A只能选择一次）

这个更难，实现将全部取决于每个插件如何处理禁用选项。当change的值发生变化时，两个插件都会触发<select>事件，因此您可以检测何时选择了新选项并在其他<select>框中禁用它。两个插件都可以通过检查disabled上的<option>属性来确定是否可以选择一个选项，就像浏览器一样，所以你会想要使用它。

这里的技巧是检测新选择的value并禁用具有相同值的其他<option>框中的所有其他<select>元素。

$select2.find("option:not(:selected)").filter(function () {
  return this.value == val;
}).prop("disabled", true);

请注意，由于Select2中存在当前错误，您需要在这些removeData("data")元素上调用<option>以清除元素的缓存数据。

4. 可以在选择框中添加自定义值的选项，该选项框将更新为所有选择框

Select2允许您通过在初始化Select2时设置tags: true来启用自定义值。选择无法添加自定义值，因此可能是交易破坏者。

5. 在其余的选择框中禁用所选值

解决3时解决了这个问题。

---

var $select2 = $(".select2");

// Copy the options to all selects based on the first one
$("select").html($select2.first().html());

// Initialize Select2
$select2.select2({
  allowClear: true,
  placeholder: "Select an option",
  tags: true
});

// Handle disabling already-selected options
$select2.on("change", function () {
  $select2.find("option:disabled").prop("disabled", false).removeData("data");
  
  $select2.each(function () {
    var val = $(this).val();
    
    $select2.find("option:not(:selected)").filter(function () {
      return this.value == val;
    }).prop("disabled", true).removeData("data");
  });
});

body { margin: 0; }
.select2 { width: 200px; }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/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.1/js/select2.js"></script>

<select class="select2">
  <option></option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<select class="select2"></select>
<select class="select2"></select>
<select class="select2"></select>