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

Question

选择开始时间

<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 中有什么简单的方法吗？

谢谢

Answer 1

这应该使用所选选项的索引并禁用该索引之前的其他选择选项：

$('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/

Answer 2

$("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/

Answer 3

你可以这样做：

• 获取start-time选中的option值
• 循环通过end-timeoptions
• 如果之前禁用 end-time 的 option

`

   $("select[name='start-time']").change(function(){
        var startVal = $(this).find("option:selected").val();
        $("select[name='end-time']").find("option").each(function(idx, elem){
            if (checkIfOptionBeforeStartVal(startVal, $(this).val()) // I let you code this compareson function
               $(this).attr('disabled', true);
            else
               $(this).attr('disabled', false);
        });
    });

`

Answer 4

除了@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，以便于处理。

此外，您可以尝试处理相反的情况，即当用户第一次选择结束时间时，在开始时禁用所有时间。