javascript - 如何根据先前选择的下拉列表值(比另一个下拉列表更大)禁用下拉选项

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

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

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

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

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>