Sharing options between selects (using HTML and jQuery)

问题

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?

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

回答2:

This might be a bit less elegant than the other answers, but here it is:

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

Let me know if this is any good?

Cheers

Adam

回答3:

How bout this?

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

来源：https://stackoverflow.com/questions/6997139/sharing-options-between-selects-using-html-and-jquery

标签

jquery

html-lists

html-select