Question

是否可以使用Chosen插件或Select2创建具有相同值的多个选择框。

条件：

所有选择框应具有相同的值
每个选择框的单选
无法在所有选择框中选择两次选项（例如： A，B，C ..是选项，其中A只能选择一次）
在选择框中添加自定义值的选项，更新为所有选择框
在其他选择框

Answer 1

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

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

所有选择框应具有相同的值

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

一样简单

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

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

每个选择框的单选

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

在所有选择框中都无法选择两次选项（例如：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>来清除元素的缓存数据。

可在选择框中添加自定义值的选项，该值会更新到所有选择框

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

在其他选择框
中禁用所选值

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

＆＃13;

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");
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: