在一個選擇下拉列表中禁用選項值，具體取決於在另一個選擇列表中選擇的值

Question

我有一個帶有兩個選擇下拉菜單的表單。 第一個是打開時間，第二個是關閉時間。 因此，當用戶選擇打開時間時，關閉時間不能早於此時間。

相反，我的Jquery禁用了所有第二個下拉值，而不是僅在前面看到的時間禁用： JSFiddle 。

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

如何獲得我想要的行為？

Answer 1

試試這個（這是更新的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內容向第二個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

大多數瀏覽器不允許禁用<select>中的各個<option>。 每當第一個<select>更改時，我都會填充第二個。