jQuery <select> option disabled if selected

问题:

I have a question similar to the one asked here: jQuery <select> option disabled if selected in other <select>

But, mine varies in that there will be more than two select boxes. In the answer provided, when an option is selected, it is set to disabled in the other select boxes (which I want to happen), but I don't want any other options selected in a different select box to have disabled removed.

Does that make sense?

Example html:

<div>
<select name="homepage_select_first">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>
</div>
<div>
<select name="homepage_select_second">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>
</div>
<div>
<select name="homepage_select_third">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>    
</div>

And the jQuery:

$('select[name*="homepage_select"]').change(function() {

    var value = $(this).val();
    alert(value);
    $('select[name*="homepage_select"]').children('option').each(function(){
        if ( $(this).val() === value ) {
            $(this).attr('disabled', true)//.siblings().removeAttr('disabled');  

        }
    });

});

Commenting out .siblings().removeAttr('disabled') simply never removes the disabled attribute...but, I want to remove it ONLY if it isn't selected in any one of the select boxes.

Basically, I only want an option to be selected in one of the selects at a time. I would think that if I could only .removeAttr('disabled') on the item that was just changed, I think that would work. But, I'm not sure how to go about this.

Does anyone have any ideas?

Thanks!

回答1:

This should do it. Basically does what your comments ask - ensures that all 3 selects have unique selections. Once a selection is made in 1 selext box that option is no longer available in the others.

$('select[name*="homepage_select"]').change(function(){


    // start by setting everything to enabled
    $('select[name*="homepage_select"] option').attr('disabled',false);

    // loop each select and set the selected value to disabled in all other selects
    $('select[name*="homepage_select"]').each(function(){
        var $this = $(this);
        $('select[name*="homepage_select"]').not($this).find('option').each(function(){
           if($(this).attr('value') == $this.val())
               $(this).attr('disabled',true);
        });
    });

});

Live example: http://jsfiddle.net/QKy4Y/

回答2:

You could do:

<div>
    <select id='1' name="homepage_select_first">
        <option value=''>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>
<div>
    <select id='2' name="homepage_select_second">
        <option value=''>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>
<div>
    <select id='3' name="homepage_select_third">
        <option value=''>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>    
</div>
$('select[name*="homepage_select"]').change(function() {
    var selectedOptions = $('select option:selected');
    $('select option').removeAttr('disabled');
    selectedOptions.each(function() {
        var value = this.value;
        if (value != ''){           
        var id = $(this).parent('select').attr('id');
        var options = $('select:not(#' + id + ') option[value=' + value + ']');
        options.attr('disabled', 'true');
        }
    });


});

fiddle here: http://jsfiddle.net/8AcN4/2/