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

Question

有没有一种方法可以使用 Chosen plugin or Select2 创建多个具有相同值的选择框。

条件：

所有的选择框应该有相同的值
每个选择框Select
不能在所有选择框中选择两次选项（例如： A,B,C..为选项，其中A只能选一次)
在选择框中添加自定义值的选项，已更新为所有选择框的
Selected 值在选择框的其余部分被禁用

Answer 1

所以，这里有几个问题，我将对所有问题分别给出一个答案。请注意，我是 Select2 的维护者，所以 我所有的回答都是针对 Select2 的。 有些人会申请选择，但我不能保证。

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

All the selectbox's should have same values

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

一样简单

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

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

Single Select for each selectbox

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

Options cannot be selected twice in all of the selectbox's (eg: A,B,C.. are options, where A can be selected only once)

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

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

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

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

Option to add custom values in the selectbox, which is updated to all selectbox's

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

Selected values are disabled in rest of the selectbox's

这个在解决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>

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

Multiple selectbox's with same values using Chosen

javascript

jquery-select2

jquery-chosen