Javascript 多个选择框'；使用所选的

是否有一种方法可以创建多个选择框，并使用插件或填充相同的值

条件：

所有selectbox的值都应该相同

为每个选择框单选

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

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

选定值在selectbox的其余部分被禁用

---

所以，这里有几个问题，我会给他们一个单独的答案。请注意，我是Select2的维护者，因此我所有的答案都是针对Select2的。有些人会申请被选中，但我不能保证

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

所有selectbox的值都应该相同

这是您不必选择2或select就可以做到的，因为这完全是一个将一个

的内容克隆到其余部分的问题。这可以是一个简单的

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

这将确保所有

框的选项与

main select类的选项相同

为每个选择框单选
Select2和selected根据您是否在
上指定了
多个属性来确定是否允许进行多项选择。因此，这里的简单解决方案是永远不要包含它，所有的选择框只允许一个选择

不能在所有选择框中选择两次选项（例如：A、B、C是选项，其中A只能选择一次）
这一个更难，实现将完全取决于每个插件如何处理动态禁用选项。当
的值更改时，这两个插件都将触发
更改
事件，因此您可以检测何时选择了新选项，并在其他
框中禁用它。两个插件都通过检查
上的
disabled
属性来确定是否可以选择某个选项，就像浏览器一样，因此您需要使用该选项

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

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

请注意，由于Select2中存在当前错误，您需要对这些
元素调用
removeData（“数据”）
，以清除该元素的缓存数据

选项在selectbox中添加自定义值，该选项将更新为所有selectbox的值
Select2允许您在初始化Select2时通过设置
tags:true
来启用自定义值。Selected无法添加自定义值，因此可能会破坏交易

选定值在selectbox的其余部分被禁用
这在求解3时得到解决



var$select2=$（“.select2”）；
//将选项复制到基于第一个选项的所有选择
$（“select”）.html（$select2.first（）.html（））；
//初始化Select2
$select2.select2({
allowClear:是的，
占位符：“选择一个选项”，
标签：真的
});
//处理禁用已选择的选项
$select2.on（“更改”，函数（）{
$select2.find（“选项：禁用”）.prop（“禁用”，false）。removeData（“数据”）；
$select2.每个功能（）{
var val=$（this.val（）；
$select2.find（“选项：未选中”）.filter（函数（）{
返回this.value==val；
}).prop（“禁用”，真）。删除数据（“数据”）；
});
});
body{margin:0；}
.选择2{宽度：200px；}

阿拉巴马州
阿拉斯加州
亚利桑那州
谢谢。在第四点中，用户添加的新选项/标记也应该附加到其他selectbox中，这样新选项就不会重复。如果有30多个selectbox具有相同的数据，则禁用它们时会出现性能问题。假设30个选择框X 30个选项=900次<代码>$select2.find（“选项：未（：选定）”）.filter（函数（）{returnthis.value==val；}）.prop（“disabled”，true）如果我有30多个具有相同数据的selectbox，则在禁用它们时会出现性能问题。假设30个选择框X 30个选项=900次<代码>$select2.find（“选项：未（：选定）”）.filter（函数（）{returnthis.value==val；}）.prop（“disabled”，true）