How disable dropdown options based on the previous

问题:

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

I have tow drop-down

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

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

回答1:

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.

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.

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>

回答2:

The solution is to disable options in second select which whose values are only less then start_year select value. You have to iterate options from end_year select, and set disabled property only for those which respecting the property: 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>

回答3:

jsfiddle, also runnable snippet is below:

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