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

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

包含默认选项也是谨慎的，无论是空的还是一些默认文本。

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

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

3 个答案: