多选框's使用Chosen具有相同的值

Multiple selectbox's with same values using Chosen

本文关键字：Chosen 使用      更新时间：2023-09-26

有没有一种方法可以使用Chosen插件或Select2创建多个具有相同值的selectbox。

条件：

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

因此，这里有几个问题，我将单独回答所有问题。请注意，我是Select2的维护者，所以我的所有答案都是针对Select2的有些人会将应用于Chosen，但我不能保证。

完整的代码在这个答案的底部，作为一个完整的可运行的堆栈代码段。问题下方会包含个别片段（如有）。

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

这是在没有Select2或Chosen的情况下应该能够做到的，因为这都是将一个<select>的内容克隆到其他内容的问题。这可以像一样简单

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

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

  1. 单选框

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

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

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

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

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

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

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

Select2允许您在初始化Select2时通过设置tags: true来启用自定义值。Chosen没有添加自定义值的能力，因此这可能会破坏交易。

  1. 所选值在选择框的其余部分中被禁用

这在求解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>

相关文章：