2011-03-27 160 views
0

在我的表单中,我有三个下拉列表来选择日期。和他们相应的可用时间。如果选择星期一和时间早上的可用日期。然后在休息时间休息两个下拉列表上午的时间应该被禁用。 HTML代码为:下拉列表验证

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/> 

请你帮我解决这个问题...

回答

1

在HTML中您使用两个id的选择标签即“day1”和“wd1”。 id是特定标签的独特功能。所以你可以用一个id来改变它。

我对HTML页面进行了以下更改: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>

所以我们可以引用select id“day1”并写入一个更改函数进行必要的验证。

Javascript代码:

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

}); 

});

其中“day2”和“day3”对应于具有天数的以下选定字段的ID。

同样的方法也可以处理时间。