Dilip Rao Dilip Rao - 5 months ago 10
jQuery Question

Js or jquery for disabling multiple lower values in dropdown list

Js or jquery code for disabling values which are present lower to the selected value in other dropdownlist and remaining values i.e greater than selected should display in other dropdownlist

<div class="col-md-2">
<select name="time_from" id="time_from" class="form-control">
<option value="">Preferred Time From</option>
<option value="06:00">6:00 AM</option>
<option value="07:00">7:00 AM</option>
<option value="08:00">8:00 AM</option>
<option value="09:00">9:00 AM</option>
<option value="10:00">10:00 AM</option>
<option value="11:00">11:00 AM</option>
<option value="12:00">12:00 PM</option>
<option value="13:00">01:00 PM</option>
<option value="14:00">02:00 PM</option>
<option value="15:00">03:00 PM</option>
<option value="16:00">04:00 PM</option>
<option value="17:00">05:00 PM</option>
<option value="18:00">06:00 PM</option>
<option value="19:00">07:00 PM</option>
<option value="20:00">08:00 PM</option>
<option value="21:00">09:00 PM</option>
</select>
<span class="help-block"></span>
</div>
<div class="col-md-2">
<select name="time_to" id="time_to" class="form-control">
<option value="">Preferred Time To</option>
<option value="07:00">7:00 AM</option>
<option value="08:00">8:00 AM</option>
<option value="09:00">9:00 AM</option>
<option value="10:00">10:00 AM</option>
<option value="11:00">11:00 AM</option>
<option value="12:00">12:00 PM</option>
<option value="13:00">01:00 PM</option>
<option value="14:00">02:00 PM</option>
<option value="15:00">03:00 PM</option>
<option value="16:00">04:00 PM</option>
<option value="17:00">05:00 PM</option>
<option value="18:00">06:00 PM</option>
<option value="19:00">07:00 PM</option>
<option value="20:00">08:00 PM</option>
<option value="21:00">09:00 PM</option>
</select>
<span class="help-block"></span>
</div>


I had two selection tags.., in 1st selection i have choosed 09:00 suppose then in 2nd dropdown it should display only the greater values to 09:00

Kld Kld
Answer

You can do with jQuery this way

$('#time_from').change(function(){

  var time_from = $(this).val();
  
  $('#time_to').find('option').filter(function()   {
       
      return $(this).attr('disabled', $(this).val() <= time_from) 
     
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-2">
                           <select name="time_from" id="time_from" class="form-control">
                            <option value="">Preferred Time From</option>
                            <option value="06:00">6:00 AM</option>
                            <option value="07:00">7:00 AM</option>
                            <option value="08:00">8:00 AM</option>
                            <option value="09:00">9:00 AM</option>
                            <option value="10:00">10:00 AM</option>
                            <option value="11:00">11:00 AM</option>
                            <option value="12:00">12:00 PM</option>
                            <option value="13:00">01:00 PM</option>
                            <option value="14:00">02:00 PM</option>
                            <option value="15:00">03:00 PM</option>
                            <option value="16:00">04:00 PM</option>
                            <option value="17:00">05:00 PM</option>
                            <option value="18:00">06:00 PM</option>
                            <option value="19:00">07:00 PM</option>
                            <option value="20:00">08:00 PM</option>
                            <option value="21:00">09:00 PM</option>
                            </select>
                            <span class="help-block"></span>
                        </div>
                        <div class="col-md-2">
                           <select name="time_to" id="time_to" class="form-control">
                            <option value="">Preferred Time To</option>
                            <option value="07:00">7:00 AM</option>
                            <option value="08:00">8:00 AM</option>
                            <option value="09:00">9:00 AM</option>
                            <option value="10:00">10:00 AM</option>
                            <option value="11:00">11:00 AM</option>
                            <option value="12:00">12:00 PM</option>
                            <option value="13:00">01:00 PM</option>
                            <option value="14:00">02:00 PM</option>
                            <option value="15:00">03:00 PM</option>
                            <option value="16:00">04:00 PM</option>
                            <option value="17:00">05:00 PM</option>
                            <option value="18:00">06:00 PM</option>
                            <option value="19:00">07:00 PM</option>
                            <option value="20:00">08:00 PM</option>
                            <option value="21:00">09:00 PM</option>
                            </select>
                            <span class="help-block"></span>
                        </div>