option - jquery: how to prevent dropdown change after user made selection? -

hej folks!

i got following script-example make selections:

fiddle example: 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> 

problem: if user made his/her selections user able change first again, leads "not-available cmbination". :(

1.) there solution disable first dropdown, after user changed second / third / fourth dropdown?

2.) or possible check values give alert "if change this, you'll have change other again?"

3.) or reset 2nd/3rd/4th values "default" again if first dropdown changed again?

sory bad english. hope understand problem. help. :)

answer 1st question,

to disable, have keep flags. may keep check selects have been changed.

example,

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

then on changing any, 1st,

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

thus can keep log of inputs have been changed.

answer 2nd,

i don't understand why asking this,

$('#001').change(function(){     alert("if change this, have change other 3."); }); 

answer 3rd,

this reset 2nd, 3rd, 4th on changing first.

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

and may change 'selectedindex' according need.

jsfiddle 3rd.