Question

在我的表单中，我有三个下拉列表来选择日期。和他们相应的可用时间。如果选择可用日作为星期一和时间早晨。然后在休息时应该禁用两对下拉列表早上的一天。 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/>

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

Answer 1

在select标签的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>。

所以我们可以参考选择id“day1”并为必要的验证写一个on change函数。

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。

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

Answer 2

查看此脚本http://plungjan.name/test/unique_days.html

应该帮助你开始

下拉列表验证

2 个答案: