如何根据先前选择的下拉值禁用下拉选项，该下拉值比另一个下拉列表更大

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

我假设您希望这可以双向工作。在第二个下拉列表中选择年份会禁用第一个下拉列表中较低的起始年份。

如果没有，只需删除绑定到#last_year 的更改事件。

包含默认选项也是谨慎的做法，可以是空的，也可以带有一些默认文本。

使用==和!=代替===和!==进行类型转换，确保“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 2

解决方案是第二个select 中的disable 选项，其值仅小于start_year 选择值。您必须从 end_year 选择迭代 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 3

jsfiddle，下面也可以运行sn-p：

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