javascript - 根据在另一个选择下拉列表中选择的值禁用一个选择下拉列表中的选项值

Question

我有一个带有两个选择下拉列表的表单。第一个是开放时间，第二个是关闭时间。所以当用户选择打开时间时，关闭时间不能早于这个时间。

我的 Jquery 会禁用所有第二个下拉值，而不是仅禁用较早的时间，如下所示:JSFiddle .

    $('#open').change(function(){
        if($('#close').val()<$('#open').val()){
            $('#close').prop('disabled', true);           
        };
    })    

如何获得我想要的行为？

Answer 1

试试这个(这里是 updated jsfiddle ):

$('#open').change(function(){
    var that = $(this);

    $('#close option').each(function() {
        if($(this).val() < that.val()) {
            $(this).prop('disabled',true);   
        } else {
            $(this).prop('disabled',false);   
        }
    });
});    

它适用于 Chrome 36，但不适用于 Firefox(除了这两个浏览器之外，尚未测试过任何浏览器)。

由于此行为不可靠，您可以尝试根据第一个 select 元素中选择的内容，向第二个 select 元素动态添加选项。

编辑

查看此jsfiddle基于你原来的 fiddle 。它可以让您动态填充第二个 select 元素。

var vals = ['00.00', '00.15', '00.30', '00.45', '01.00', '01.15', '01.15'];

for(var i = 0; i<vals.length; i++) {
    $('#open').append('<option val="'+vals[i]+'">'+vals[i]+'</option>');   
}

$('#open').change(function(){
    $('#close').html('');

    for(var i = 0; i<vals.length; i++) {
        if(vals[i] >= $(this).val()) {
            $('#close').append('<option>'+vals[i]+'</option>');
        }
    }
}).change();