如何基于先前选择的下拉菜单值禁用下拉菜单选项，该值大于另一个下拉菜单

Question

$('select').on('change', function(){
    $('select option').prop("disabled", false);
    $("select").not(this).find("option[value="+ $(this).val() + "]").prop('disabled', true);
});

I have tow drop-down

<select name="start_year" id="start_year">
  <option value="2014">2014</option>
  <option value="2015">2015</option>
  <option value="2016">2016</option>
  <option value="2017">2017</option>   
</select>

<select name="last_year" id="last_year">
  <option value="2014">2014</option>
  <option value="2015">2015</option>
  <option value="2016">2016</option>
  <option value="2017">2017</option>   
</select>

I want if i choose 2016 in my first drop-down then 2015 and 2014 should disable in second drop-down.

Answer 1

The solution is to disable options in second select which whose values are only less then start_year select value. You have to iterate options from end_year select, and set disabled property only for those which respecting the property: if($(this).val()<value) .

 $('#start_year').on('change', function(){ var value=$(this).val(); $('select option').prop("disabled", false); $("#last_year option").each(function(){ if($(this).val()<value){ $(this).prop("disabled",true); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="start_year" id="start_year"> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> </select> <select name="last_year" id="last_year"> <option>Please select...</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> </select> 

Answer 2

I assume you want this to work both ways. Select a year in the second dropdown disables the lower starting years in the first dropdown.

If not, just remove the change event bound to #last_year .

It is also prudent to have a default option included, either empty or with some default text.

Using == and != instead of === and !== for type conversion to ensure "0" is equal to 0

 $('document').ready(function() { $('#start_year').on('change', function() { var $lastYear = $('#last_year option') var startYearValue = this.value; $lastYear.prop("disabled", false); if(startYearValue === 0){ return; } $lastYear.each(function() { if (this.value != 0 && this.value < startYearValue) { $(this).prop("disabled", true); } }) }); $('#last_year').on('change', function() { var $startYear = $('#start_year option') var lastYearValue = this.value; $startYear.prop("disabled", false); if(lastYearValue == 0){ return; } $startYear.each(function() { if (this.value > lastYearValue) { $(this).prop("disabled", true); } }) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="start_year" id="start_year"> <option value="0"></option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> </select> <select name="last_year" id="last_year"> <option value="0"></option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> </select> 

Answer 3

jsfiddle , also runnable snippet is below:

 $('select').on('change', function() { $('select option').prop("disabled", false); var selectedval = $(this).val(); var anotherSelectMenu = $("select").not(this); $.each(anotherSelectMenu.find('option'), function(i, item) { if ($(item).val() < selectedval) $(item).prop('disabled', true); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="start_year" id="start_year"> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> </select> <select name="last_year" id="last_year"> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> </select>