选择之间共享选项（使用HTML和jQuery）

看了很多答案，却找不到解决这个问题的人。 我有四个（可能是n个） 列表，每个列表中有相同数量的可能性，如下所示：

 Pick a:  One Two Three Four  Pick b:  One Two Three Four  Pick c:  One Two Three Four  Pick d:  One Two Three Four  

请注意，列表中的每个可用选项都已选中（并且每个列表都具有完全相同的 ）。 现在，这些应该通过不允许任何两个列表具有相同的选定值来自动响应更改。 使用jQuery，我想做到这一点，当我在第一个列表中选择例如Four时，我希望第四个列表自动设置One （列表之间唯一可用的空闲选项）设置为选中。

任何人都可以帮忙吗？

Answer 1

这应该这样做：

 // get all and dump into a variable to speed things up var $selects = $("select"); // bind a click even to keep tabs of select values before they're changed $selects.click(function(){ $(this).attr("current", $(this).val()); }); $selects.change(function(e){ var $select = $(this); // get select that is not the currently changing select with the same // value as what the current select changed to. If found, update this other // selects value to the changing selects "current" attribute, which is what // it WAS $selects.not($select) .find("option[value='" + $select.val() + "']:selected") .parent().val($select.attr("current")); }); 

http://jsfiddle.net/hunter/VVazA/

Answer 2

这可能不如其他答案那么优雅，但这里是：

 $(document).ready(function() { var previous_value; var changed_value; var selected_object_index; $(".colorassign").focus(function() { previous_value = $(this).val(); }); $(".colorassign").change(function() { changed_value = $(this).val(); selected_object_index = $(".colorassign").index($(this)); $(".colorassign").each(function(index) { if (index != selected_object_index) { if ($(this).val() == changed_value) { $(this).find("option").removeAttr("selected"); $(this).val(previous_value); $(this).find("option[value="+previous_value+"]").attr("selected", "selected"); } } }); }); 

如果这有什么好处，请告诉我？

干杯

亚当

Answer 3

怎么回事？

 $("select").each(function() { $(this).attr("current",$(this).val()) }); $("select").change(function() { $(this).siblings("select").find("option[value='" + $(this).val() + "']:selected").parent().val($(this).attr("current")).change(); $(this).attr("current",$(this).val()); }); 

http://jsfiddle.net/YaRF6/4/