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

Question

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

我有拖曳下拉菜单

<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>

我想在第一个下拉菜单中选择2016年，然后在第二个下拉菜单中禁用2015年和2014年。

Answer 1

解决方案是在第二select disable其值仅小于start_year选择值的选项。 您必须迭代end_year select中的options ，并仅为那些尊重该属性的属性设置disabled属性： 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

我认为您希望这两种方式都能起作用。 在第二个下拉列表中选择年份会禁用第一个下拉列表中的较低起始年份。

如果不是，则只需删除绑定到#last_year的change事件。

谨慎选择是否包含默认选项，该选项可以为空或带有一些默认文本。

使用==和!=代替===和!==进行类型转换，以确保“ 0”等于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 ，也是可运行的代码段如下：

 $('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>