javascript - Disable option values in one select dropdown depending on value selected in another -

i have form 2 select dropdowns. first opening times , second closing times. when user selects opening time closing time cannot earlier this.

my jquery instead disables second drop down values instead of times earlier can seen here: jsfiddle.

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

how can behaviour want?

try (here updated jsfiddle):

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

it works on chrome 36, not on firefox (haven't tested browsers besides two).

since behavior unreliable, might try dynamically adding options second select element based on whatever chosen in first select element.

edit

see jsfiddle based on original fiddle. let dynamically populate second select element.

var vals = ['00.00', '00.15', '00.30', '00.45', '01.00', '01.15', '01.15'];  for(var = 0; i<vals.length; i++) {     $('#open').append('<option val="'+vals[i]+'">'+vals[i]+'</option>');    }  $('#open').change(function(){     $('#close').html('');      for(var = 0; i<vals.length; i++) {         if(vals[i] >= $(this).val()) {             $('#close').append('<option>'+vals[i]+'</option>');         }     } }).change();