jQueryの兄弟はdiv内のオプションを選択しませんか？

Question

$('.input-group select').change(function() { 
 
    
 
    var value = $(this).val(); 
 
alert($('.input-group select').siblings('select').children('option').length); 
 
    $(this).siblings('select').children('option').each(function() { 
 
     if ($(this).val() === value) { 
 
      $(this).attr('disabled', true).siblings().removeAttr('disabled'); 
 
     } 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="input-group 1"> 
 
    <select name="select1"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
    </select> 
 
</div> 
 

 
<div class="input-group 2"> 
 
    <select name="select2"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
    </select> 
 
</div>

私は、次のコードを持っているユーザーは、この値は、第2選択ボックスと逆に無効になっていることを最初の値Aで選択したときに選択の内側オプションを選択したいと思います。

jQueryの兄弟が見つかりましたが、私はdivで選択できません...どこが間違っていますか？

Answer 1

...ここでの
仮定は、この機能がために設計されるべきであることをHTMLで唯一の2 selectのボックスがあるということです、これを試してください：

$ = jQuery; 
 
$("#select1, #select2").on("change", function() { 
 
    if($(this).attr("id") == "select1"){ 
 
     src = "#select1"; target="#select2"; 
 
    } 
 
    else{ 
 
     src = "#select2"; target="#select1"; 
 
    } 
 

 
    $(target).children().removeAttr("disabled"); 
 
    $(target).find("option[value="+$(src).val()+"]").attr("disabled", "disabled"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group 1"> 
 
    <select id="select1"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
    </select> 
 
</div> 
 

 
<div class="input-group 2"> 
 
    <select id="select2"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
    </select> 
 
</div>

EDIT
「コメント」セクションに記載されている問題に対処するためにjQueryが更新されました。新しいselectボックスが既存のものと同様の方法で、つまり新しい<div class="input-group">の下に追加されるという前提があります。

$("select").on("change", function(){ 
    $(this).parent().siblings().find("option").removeAttr("disabled"); 
    $(this).parent().siblings() 
      .find("option[value="+$(this).val()+"]").attr("disabled", "disabled"); 
}); 

提案：：したがって、与えられたHTMLのレイアウトに応じて更新jQueryのは次のようになり

• ラップfunction内側上記のコードと新しいselectボックスがある時はいつでも、その関数を呼び出します動的に追加されました。再度、<div class="input-group">の下に追加され、最初の要素のすぐ上に親<div>が追加されることが想定されています。

• <option>No Match</option>から<option value="0">No Match</option>またはそれに類するもの。ここで

Answer 2

私は4選択ボックスでこれをテストイム...と私は3 & 4が1つの& 2選択ボックスから選択を無効にしない選択ボックスの値最初の二つのボックスの値を選択したときに気づきました...私は10の項目を追加するときスクリプトでこれを参照してください...最初の2つの選択ボックスのために期待どおりに動作しますが、他の人のために3 & 4はありません... Dhruv Saxena..if誰かがなぜこの期待どおりに動作しません。たとえば、このように動作する必要があります。

セレクトボックス＃1テスト選択 セレクトボックス＃2テスト2選択&テストはdisa （無効の更新を選択ボックス＃1テスト2）選択した セレクトボックス＃3テスト3を採血&テスト& Test2を無効（アップデートの選択ボックス＃1テスト2 & Test3は無効&更新を選択ボックス＃2テスト無効3）

そして、 so on so so qoalは現在の選択ボックスで項目が選択されている間、他のすべての選択ボックスでこの項目を無効にします。

$("select").on("change", function(){ 
 
    $(this).parent().siblings().find("option").removeAttr("disabled"); 
 
    $(this).parent().siblings() 
 
      .find("option[value="+$(this).val()+"]").attr("disabled", "disabled"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="input-group 1"> 
 
    <select id="1"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
     <option value="4">Test 3</option> 
 
    </select> 
 
</div> 
 

 
<div class="input-group 2"> 
 
    <select id="2"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
     <option value="4">Test 3</option> 
 
    </select> 
 
</div> 
 

 
<div class="input-group 3"> 
 
    <select id="3"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
     <option value="4">Test 3</option> 
 
    </select> 
 
</div> 
 

 
<div class="input-group 4"> 
 
    <select id="4"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
     <option value="4">Test 3</option> 
 
    </select> 
 
</div>