Javascript 选择“开始和结束时间验证”选项

选择开始时间

选择结束时间

如果从开始时间中选择开始时间，是否有任何快速jQuery登录可以在结束时间中禁用前面的选项

例如，如果开始时间选择为下午3点，而结束时间选择为下午3点之前的所有选项都应禁用

在jQuery中有什么简单的方法可以做到这一点吗

---

谢谢

您可以这样做：

获取所选的开始时间选项值 循环结束时间选项 禁用“结束时间”选项（如果在之前） `

---

`

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

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

小提琴：

---

小提琴：

对@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;
        }
    });
});

以确保在更改开始时间时，它可以正常工作

注意：我在两个选择菜单中都添加了id，以便于处理

---

此外，您还可以尝试处理相反的情况，即当用户首次选择结束时间时，请在开始中禁用该时间之后的所有时间。

我想知道为什么会进行向下投票。我不知道怎么了。我想是因为你误读了这个问题吧？当op说“例如，如果开始时间选择为3pm，结束时间选择为3pm，则应禁用3pm之前的所有选项。”他们的意思是不允许用户在开始时间之前选择结束时间，而不是完全禁用输入否，它禁用选项而不是选择，因此它禁用值低于3pm的选项。确实如此，我错过了.findoption，我不知道那是多么棒，这是有效的，但是除了禁用以前的值之外，还有其他方法可以删除吗？更改为$this.attr'hidden'，'hidden'；工作。非常感谢。更加优雅的解决方案@Maurice。

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

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

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

$('#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;
        }
    });
});