选择开始时间
<select name="start-time">
<option value="00:00 am" selected="selected">00:00 am</option><option value="00:30 am">00:30 am</option><option value="01:00 am">01:00 am</option><option value="01:30 am">01:30 am</option><option value="02:00 am">02:00 am</option><option value="02:30 am">02:30 am</option><option value="03:00 am">03:00 am</option><option value="03:30 am">03:30 am</option><option value="04:00 am">04:00 am</option><option value="04:30 am">04:30 am</option><option value="05:00 am">05:00 am</option><option value="05:30 am">05:30 am</option><option value="06:00 am">06:00 am</option><option value="06:30 am">06:30 am</option><option value="07:00 am">07:00 am</option><option value="07:30 am">07:30 am</option><option value="08:00 am">08:00 am</option><option value="08:30 am">08:30 am</option><option value="09:00 am">09:00 am</option><option value="09:30 am">09:30 am</option><option value="10:00 am">10:00 am</option><option value="10:30 am">10:30 am</option><option value="11:00 am">11:00 am</option><option value="11:30 am">11:30 am</option><option value="12:00 pm">12:00 pm</option><option value="12:30 pm">12:30 pm</option><option value="13:00 pm">13:00 pm</option><option value="13:30 pm">13:30 pm</option><option value="14:00 pm">14:00 pm</option><option value="14:30 pm">14:30 pm</option><option value="15:00 pm">15:00 pm</option><option value="15:30 pm">15:30 pm</option><option value="16:00 pm">16:00 pm</option><option value="16:30 pm">16:30 pm</option><option value="17:00 pm">17:00 pm</option><option value="17:30 pm">17:30 pm</option><option value="18:00 pm">18:00 pm</option><option value="18:30 pm">18:30 pm</option><option value="19:00 pm">19:00 pm</option><option value="19:30 pm">19:30 pm</option><option value="20:00 pm">20:00 pm</option><option value="20:30 pm">20:30 pm</option><option value="21:00 pm">21:00 pm</option><option value="21:30 pm">21:30 pm</option><option value="22:00 pm">22:00 pm</option><option value="22:30 pm">22:30 pm</option><option value="23:00 pm">23:00 pm</option><option value="23:30 pm">23:30 pm</option></select>
选择结束时间
<select name="end-time">
<option value="00:00 am" selected="selected">00:00 am</option><option value="00:30 am">00:30 am</option><option value="01:00 am">01:00 am</option><option value="01:30 am">01:30 am</option><option value="02:00 am">02:00 am</option><option value="02:30 am">02:30 am</option><option value="03:00 am">03:00 am</option><option value="03:30 am">03:30 am</option><option value="04:00 am">04:00 am</option><option value="04:30 am">04:30 am</option><option value="05:00 am">05:00 am</option><option value="05:30 am">05:30 am</option><option value="06:00 am">06:00 am</option><option value="06:30 am">06:30 am</option><option value="07:00 am">07:00 am</option><option value="07:30 am">07:30 am</option><option value="08:00 am">08:00 am</option><option value="08:30 am">08:30 am</option><option value="09:00 am">09:00 am</option><option value="09:30 am">09:30 am</option><option value="10:00 am">10:00 am</option><option value="10:30 am">10:30 am</option><option value="11:00 am">11:00 am</option><option value="11:30 am">11:30 am</option><option value="12:00 pm">12:00 pm</option><option value="12:30 pm">12:30 pm</option><option value="13:00 pm">13:00 pm</option><option value="13:30 pm">13:30 pm</option><option value="14:00 pm">14:00 pm</option><option value="14:30 pm">14:30 pm</option><option value="15:00 pm">15:00 pm</option><option value="15:30 pm">15:30 pm</option><option value="16:00 pm">16:00 pm</option><option value="16:30 pm">16:30 pm</option><option value="17:00 pm">17:00 pm</option><option value="17:30 pm">17:30 pm</option><option value="18:00 pm">18:00 pm</option><option value="18:30 pm">18:30 pm</option><option value="19:00 pm">19:00 pm</option><option value="19:30 pm">19:30 pm</option><option value="20:00 pm">20:00 pm</option><option value="20:30 pm">20:30 pm</option><option value="21:00 pm">21:00 pm</option><option value="21:30 pm">21:30 pm</option><option value="22:00 pm">22:00 pm</option><option value="22:30 pm">22:30 pm</option><option value="23:00 pm">23:00 pm</option><option value="23:30 pm">23:30 pm</option></select>
如果从结束时间中选择了开始时间,是否有任何快速jQuery登录可以禁用之前的选项。
例如,如果选择开始时间为下午3点,则在结束时间中,应禁用所有下午3点之前的选项。
在jQuery中有没有简单的方法呢?
由于
答案 0 :(得分:4)
这应该可以使用所选选项的索引并禁用该索引之前的其他选择选项:
$('select[name=start-time]').on("change",function(){
var theSelectedIndex = $(this)[0].selectedIndex;
$.each($('select[name=end-time] option'), function(){
var endOptionIndex = $(this).index();
if (endOptionIndex < theSelectedIndex){
$(this).attr('disabled','disabled');
} else{
$(this).removeAttr('disabled').prop('selected', true);
return false;
}
});
});
答案 1 :(得分:3)
$("select[name='start-time']").on("change", function(){
$("select[name='end-time']").empty();
var startix = $("select[name='start-time'] option:selected").index();
$("select[name='start-time'] option").each(function(ix, el){
if (ix >= startix) {
$(this).clone().appendTo("select[name='end-time']");
}
});
});
答案 2 :(得分:0)
你可以这样做:
start-time
选定的option
值end-time
option
s end-time
的{{1}}
`
option
`
答案 3 :(得分:0)
添加@ staticVoid的答案,做类似
的事情$('#start').on("change",function(){
var select = $(this)[0].selectedIndex;
$('option').removeAttr('disabled'); //in case start time is changed
$.each($('#end option'), function(){
var disable = $(this).index();
if (disable < select){
$(this).attr('disabled','disabled');
} else{
$(this).removeAttr('disabled').prop('selected', true);
return false;
}
});
});
确保在更改开始时间时正常工作。 FIDDLE
注意:我已将id
添加到两个选择菜单中,以便于处理。
此外,您可以尝试处理相反的操作,即,当用户首次选择结束时间时,请在开始后的所有时间禁用。