jquery: как предотвратить выпадающее меню после выбора пользователя?

Question

Хей Люди!

я получил следующий сценарий-пример, чтобы сделать некоторые выборы:

Fiddle пример: http://jsfiddle.net/dataminer/7zYUS/1/

$(function(){ 

var My_2_MadeSelection = { 

// Second Selection 
'001': ['004'], 
'002': ['005'], 
'003': ['006'] 
}; 

// Third Selection 
var My_3_MadeSelection = { 

'001': ['007'], 
'002': ['008'], 
'003': ['009'] 
}; 

// Fourth Selection 
var My_4_MadeSelection = { 

'001': ['010'], 
'002': ['011'], 
'003': ['012'] 
}; 


// var 
$('#001').change(function() { 
var availableMy_2_MadeSelection = My_2_MadeSelection[this.options[this.selectedIndex].value]; 
var availableMy_3_MadeSelection = My_3_MadeSelection[this.options[this.selectedIndex].value]; 
var availableMy_4_MadeSelection = My_4_MadeSelection[this.options[this.selectedIndex].value]; 

// groups 
$('#002 option').attr('disabled', function() { return $.inArray(this.value, availableMy_2_MadeSelection) == -1 }); 
$('#003 option').attr('disabled', function() { return $.inArray(this.value, availableMy_3_MadeSelection) == -1 }); 
$('#004 option').attr('disabled', function() { return $.inArray(this.value, availableMy_4_MadeSelection) == -1 }); 
}); 

// change 
$('#001').change(function() { 
if (this.options[this.selectedIndex].value === 1) { 
$('#002,#003,#004').attr("disabled", "disabled"); 
} else { 
$('#002,#003,#004').removeAttr("disabled"); 
} 
}); 

// trigger 
$('#001').trigger('change'); 
}); 

HTML

<div id="selectdiv"> 
<p>1. Select</p> 
<select id="001" class="001" name="001"> 
    <option selected="selected" value="001">001a</option> 
    <option value="002">001b</option> 
    <option value="003">001c</option> 
    </select> 

<p>2. Select</p> 
<select id="002" class="002" name="002"> 
    <option selected="selected" value="004">002a</option> 
    <option value="005">002b</option> 
    <option value="006">002c</option> 
    </select> 


<p>3. Select</p> 
<select id="003" class="003" name="003"> 
    <option selected="selected" value="007">003a</option> 
    <option value="008">003b</option> 
    <option value="009">003c</option> 
    </select> 


<p>4. Select</p> 
<select id="004" class="004" name="004"> 
    <option selected="selected" value="010">004a</option> 
    <option value="011">004b</option> 
    <option value="012">004c</option> 
    </select> 
</div> 

Проблема: Если пользователь в настоящее время из всех его/ее SELECTIONS пользователь может изменить сначала снова, что приводит к «недоступной комбинации». :(

1.) Есть ли решение отключить первое выпадающее меню, после того как пользователь изменил выпадающее меню второй/третьей/четвертой?

2.) Или можно проверить значения, чтобы дать предупреждение, например, «если вы измените это, вам придется снова изменить другого?»

3.) Или снова сбросьте значения 2/3/4-й позиции в значение «по умолчанию», если первое выпадающее меню было изменено снова?

Sory для моего плохого английского. Надеюсь, кто-то поймет мою проблему. Спасибо за любую помощь. :)

Answer 1

Ответ на 1-й вопрос,

Чтобы отключить, вам придется держать флаги. Вы можете проверить, все ли изменения были изменены.

Пример,

var changed1 = false, 
    changed2 = false, 
    changed3 = false, 
    changed4 = false; 

Тогда при изменении любого, скажем, первый,

$("#001").change(function(){ 
     changed1 = true; 
     if(changed2 && changed3 && changed4){ 
       $("#001").prop('disabled', true); 
     } 
    }); 

$("#002").change(function(){ 
     changed2 = true; 

}); 
$("#003").change(function(){ 
     changed3 = true; 
}); 
$("#004").change(function(){ 
     changed1 = true; 
}); 

Таким образом, вы можете сохранить журнал из которых были изменены все входы.

Ответ на 2-й,

Я не понимаю, почему вы даже не спросив на это,

$('#001').change(function(){ 
    alert("If you change this, you also will have to change the other 3."); 
}); 

Ответ на 3-й,

Это сброс 2-й, 3-й, 4-й по изменению первый.

$('#001').change(function(){ 
    $('#002, #003, #004').prop('selectedIndex',0); 
}); 

И вы можете даже изменить «selectedIndex» в соответствии с вашими потребностями.

JSFIDDLE для 3-го.

Answer 2

Это другой формат. Вы можете понять остальных, используя ответ Оптимуса Прайма.

Например. Отключите первый раскрывающийся список. jsFiddle

$(function(){ 

    var My_2_MadeSelection = { 
     // Second Selection 
     '001': ['004'], 
     '002': ['005'], 
     '003': ['006'] 
    }; 

    // Third Selection 
    var My_3_MadeSelection = { 
     '001': ['007'], 
     '002': ['008'], 
     '003': ['009'] 
    }; 

    // Fourth Selection 
    var My_4_MadeSelection = { 
     '001': ['010'], 
     '002': ['011'], 
     '003': ['012'] 
    }; 

    $('select').change(function() { 
     if ($(this).attr('id') == '001') { 
      // var 
      var availableMy_2_MadeSelection = My_2_MadeSelection[this.options[this.selectedIndex].value]; 
      var availableMy_3_MadeSelection = My_3_MadeSelection[this.options[this.selectedIndex].value]; 
      var availableMy_4_MadeSelection = My_4_MadeSelection[this.options[this.selectedIndex].value]; 
      // groups 
      $('#002 option').attr('disabled', function() { return $.inArray(this.value, availableMy_2_MadeSelection) == -1 }); 
      $('#003 option').attr('disabled', function() { return $.inArray(this.value, availableMy_3_MadeSelection) == -1 }); 
      $('#004 option').attr('disabled', function() { return $.inArray(this.value, availableMy_4_MadeSelection) == -1 }); 
     }else{ 
      $('#001').attr('disabled','disabled'); 
     } 
    }); 

    // trigger 
    $('#001').trigger('change'); 
});