どのように無効にし、ドロップダウンオプションは、別のドロップダウンから大きい以前に選択ドロップダウン値に基づいて

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> 

私はその後、私の最初のドロップダウンに2015 2016を選択した場合、私がしたいです2014年は2回目のプルダウンで無効にする必要があります。

Answer 1

私はあなたが、これは両方の方法を仕事をしたいと仮定します。 2番目のドロップダウンで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

解決策は、disableオプション2番目selectです。この値は、start_yearの値よりもわずかです。 optionsを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 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>