Question

Looked through many answers, but couldn’t find one solving this. I have four (potentially n-number of) <select> lists, with an equal number of <option> possibilities in each, like this:

<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>

Notice that each available option within the lists are selected (and each list have the exact same <option>s). Now, these should automatically respond to change by not allowing any two lists to have the same selected value. Using jQuery, I want to make it so that when I select for example Four in the first list, I want the fourth list to automatically set One (the only available free option between the lists) to be set to selected.

Could anyone give a hand with this?

Answer 1

This should do it:

// 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/