Совместное использование параметров между выборками (с использованием HTML и jQuery)

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, я хочу сделать так, чтобы при выборе, например, Четыре в первом списке, я хотел, чтобы четвертый список автоматически устанавливал Один (единственная доступная бесплатная опция между списки) для выбора.

Может ли кто-нибудь помочь с этим?

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/