Question

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

<label>Pick a:</label>
<select class="colorassign">
    <option value="1" selected="selected">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>   
<label>Pick b:</label>
<select class="colorassign">
    <option value="1">One</option>
    <option value="2" selected="selected">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>   
<label>Pick c:</label>
<select class="colorassign">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3" selected="selected">Three</option>
    <option value="4">Four</option>
</select>   
<label>Pick d:</label>
<select class="colorassign">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4" selected="selected">Four</option>
</select>

请注意，列表中的每个可用选项都已选中（并且每个列表都具有完全相同的<option> s）。现在，这些应该通过不允许任何两个列表具有相同的选定值来自动响应更改。使用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

这是怎么回事？

$("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/

Answer 3

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

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

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

干杯

亚当

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

3 个答案: