如何基于先前选择的下拉菜单值禁用下拉菜单选项，该值大于另一个下拉菜单的值 [英] How disable dropdown options based on the previously selected dropdown values which is bigger from another dropdown

问题描述

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

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

推荐答案

我假设您希望这两种方法都能起作用.在第二个下拉菜单中选择年份会禁用第一个下拉菜单中的较低起始年份.

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.

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

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.

使用==和!=而不是===和!==进行类型转换，以确保"0"等于0

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>

这篇关于如何基于先前选择的下拉菜单值禁用下拉菜单选项，该值大于另一个下拉菜单的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！