选择开始和结束时间的选项验证

时间:2014-06-26 12:51:30

标签: javascript jquery

选择开始时间

<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中有没有简单的方法呢?

由于

4 个答案:

答案 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;
        }
    });
});

小提琴:http://jsfiddle.net/nUAV3/

答案 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']");
        }
    });
});

小提琴:http://jsfiddle.net/H6PAL/

答案 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添加到两个选择菜单中,以便于处理。

此外,您可以尝试处理相反的操作,即,当用户首次选择结束时间时,请在开始后的所有时间禁用。