修改

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。它将允许您动态填充第二个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();

Answer 2

大多数浏览器都不允许在＆lt; select＆gt;中禁用单个＆lt;选项＆gt ;. 我会填写第二个＆lt; select＆gt;每当第一次改变时。

在一个选择下拉列表中禁用选项值，具体取决于另一个选择的值

2 个答案:

修改