最初の選択から選択オプションを選択したときに以前に選択したオプションを無効にする方法

Question

2つの選択要素があります。両方とも同じ値を持ちます。 1の選択ボックスからオプションを選択すると、2番目の選択ボックスから以前のすべての選択オプションが無効になります。 のは、私はこの選択を持っているとしましょう：私は、S1ボックスから値3を選択した場合

<select id="s1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </select> 

    <select id="s2"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </select> 

はそれがs2の選択から、以前のすべてのオプションを無効にする必要があります。私がs1から値2を選択すると、s2の以前の値がすべて無効になります。

注：次の値を無効にするべきではありません。私はjqueryソリューションを探しています。

Answer 1

:ltを使用して、指定されたインデックスよりも小さいインデックスのエレメントを選択します。

.index()は、一致した要素から要素の位置を返します。

.not()は、返された要素から特定の要素を除外します。 lt`セレクタ：

$('select').change(function() { 
 
    $('select option').prop('disabled', false); 
 
    var index = $(this).find('option:selected').index(); 
 
    $('select').not(this).find('option:lt(' + index + ')').prop('disabled', true); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select id="s1"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 

 
<select id="s2"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select>

Fiddle here

Answer 2

それはあなたどう `について

$(document).ready(function() { 
$("#s1").change(function() { 
    var optVal = $(this).val(); 
    $("#s2 option").each(function() { 
     $(this).prop('disabled', false); 
     if (optVal > $(this).val()) { 
      $(this).prop('disabled', true); 
     } 
    }); 
});});