Параметр jQuery <select>отключен, если выбран в нескольких полях <select>

Question

У меня есть вопрос, похожий на тот, который задан здесь: jQuery

Но, мой меняется в том, что будет больше, чемдва поля выбора.В предоставленном ответе, когда опция выбрана, она отключена в других полях выбора (что я и хочу сделать), но я не хочу, чтобы другие опции, выбранные в другом окне выбора, были отключены.

Имеет ли это смысл?

Пример 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>

И 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');  

        }
    });

});

Комментирование .siblings().removeAttr('disabled') просто никогда не удаляетатрибут disabled ... но я хочу удалить его ТОЛЬКО, если он не выбран ни в одном из полей выбора.

По сути, я хочу, чтобы вариант был выбран только в одном из вариантов выбора одновременно.Я думаю, что если бы я мог только .removeAttr('disabled') на элементе, который только что изменился, я думаю, что это сработало бы.Но я не знаю, как это сделать.

У кого-нибудь есть идеи?

Спасибо!

Answer 1

Это должно сделать это. В основном делает то, что просят ваши комментарии - гарантирует, что все 3 выбора имеют уникальные выборы. Как только выбор сделан в 1 окне выбора, этот параметр больше не доступен в других.

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

});

Пример в реальном времени: http://jsfiddle.net/QKy4Y/

Answer 2

Вы можете сделать:

<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');
        }
    });


});

скрипка здесь: http://jsfiddle.net/8AcN4/2/