drop down list validation

Question

in my form i have three drop down lists to select days. and their corresponding available time. If one selects available day as monday and time morning. then in rest two pair of drop down list morning slot for monday should be disabled. html code is as:

DAY 1:<select id="day1" title="- Select day -" name="wd1" id="wd1" tabindex="14"  >
                          <option  selected>-select-</option> 
              <option value="1" >Sunday</option>
                          <option value="2"  >Monday</option>
                          <option value="3"  >Tuesday</option>
                          <option value="4"  >Wednesday</option>
                          <option value="5"  >Thursday</option>
              <option value="6"  >Friday</option>
                          <option value="7"  >Saturday</option>
                          </select>

TIME 1 :  <select name="tslot1" id="tslot1" tabindex="15">
 <option  selected>-select-</option> 
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br><br>


DAY 2:<select id="day2" title="- Select day -" name="wd2" id="wd2" tabindex="16" >

                          <option  selected>-select-</option> 
            <option value="1" >Sunday</option>
                          <option value="2"  >Monday</option>
                          <option value="3"  >Tuesday</option>
                          <option value="4"  >Wednesday</option>
                          <option value="5"  >Thursday</option>
              <option value="6"  >Friday</option>
                          <option value="7"  >Saturday</option>
                          </select>

TIME 2 :  <select name="tslot2" id="tslot2" tabindex="17" >
 <option  selected>-select-</option> 
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br/><br/>

DAY 3:<select select id="day3" title="- Select day -" name="wd3" id="wd3" tabindex="18" >

                          <option  selected>-select-</option> 
                          <option value="1" >Sunday</option>
                          <option value="2"  >Monday</option>
                          <option value="3"  >Tuesday</option>
                          <option value="4"  >Wednesday</option>
                          <option value="5"  >Thursday</option>
              <option value="6"  >Friday</option>
                          <option value="7"  >Saturday</option>
                          </select>

TIME 3 :  <select name="tslot3" id="tslot3" tabindex="19" >
 <option  selected>-select-</option> 
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br/><br/> 

Please do help me with this problem...

Answer 1

In the HTML for the select tags you have used two id's namely "day1" and "wd1". id is a unique feature of a particular tag.So u can change it with a single id.

i have made the following changes to the HTML page : DAY 1: <select id="day1" title="- Select day -" name="day1" tabindex="14" > <option selected>-select-</option> <option value="1">Sunday</option> <option value="2">Monday</option> <option value="3">Tuesday</option> <option value="4">Wednesday</option> <option value="5">Thursday</option> <option value="6">Friday</option> <option value="7">Saturday</option> </select> .

so we may refer to the select id "day1" and write a on change function for the necessary validations.

Javascript code:

$(document).ready(function(){
$("#day1").on('change',function() {

  var index = $('#day1').get(0).selectedIndex;
  alert(index+"index");

  $('#day2 option:eq(' + index + ')').attr("disabled","disabled");
  $('#day3 option:eq(' + index + ')').attr("disabled","disabled");

});

});

where "day2" and "day3" corresponds to the id of the below select fields with days.

Similarly same approach can be dealt with time too.

Answer 2

Have a look at this script http://plungjan.name/test/unique_days.html

Should help you get started