選択ボックス自動選択htmlの多くのdivコンテンツの使用

Question

多くのdivの選択ボックスに自動選択を使用したいと思います。 ソフトウェア選択のように何度も自動選択を使用できますか？ セレクトボックスクラス名に多くの時間を書きたくないです。 私の例： セレクトボックスの自動選択は2番目のdiv（divTwo）で動作しません。div2のオプションをクリックするとdivOneのオプションが変更されます。divを個別にクリックすると変更されません。

$(document).ready(function() { 
    $(".a1").change(function(){ 
     $(".a2 option").eq($(this).prop("selectedIndex")).prop("selected", "selected"); 
     $(".a3 option").eq($(this).prop("selectedIndex")).prop("selected", "selected"); 
    }); 
    $(".a2").change(function(){ 
     $(".a1 option").eq($(this).prop("selectedIndex")).prop("selected", "selected"); 
     $(".a3 option").eq($(this).prop("selectedIndex")).prop("selected", "selected"); 
    }); 

    $(".a3").change(function(){ 
     $(".a1 option").eq($(this).prop("selectedIndex")).prop("selected", "selected"); 
     $(".a2 option").eq($(this).prop("selectedIndex")).prop("selected", "selected"); 
    }); 
}); 

<div class="divOne"> 
    <select class=" a1" > 
     <option >Option1</option> 
     <option >Option2</option> 
     <option >Option3</option> 
    </select> 
    <select class=" a2" > 
     <option >Option1</option> 
     <option >Option2</option> 
     <option >Option3</option> 
    </select> 
    <select class=" a3" > 
     <option >Option1</option> 
     <option >Option2</option> 
     <option >Option3</option> 
    </select> 
</div> 
<div class="divTwo"> 
    <select class=" a1" > 
     <option >Option1</option> 
     <option >Option2</option> 
     <option >Option3</option> 
    </select> 
    <select class=" a2" > 
     <option >Option1</option> 
     <option >Option2</option> 
     <option >Option3</option> 
    </select> 
    <select class=" a3" > 
     <option >Option1</option> 
     <option >Option2</option> 
     <option >Option3</option> 
    </select> 
</div> 

Answer 1

$([selector]) 

これは常にセレクタに一致するjQueryのオブジェクトの配列を返します。あなたはそれが3要素の配列を返すと思います。しかし、それは6要素の配列を返しています。

$(".a1 option") 

<select class="a1">のすべてのオプションの配列（6）を返します。これらはDIV ONEとDIV TWOの両方にあります。 HTMLでのシーケンスのため、DIV ONEのオプションが最初に要素の配列にリストされます。

$(".a1 option").eq($(this).prop("selectedIndex")) 

これにより、DIV ONE> A1> options [selectedIndex]の新しいjQueryオブジェクトが作成されます。これは前述の理由によるものです。したがって、すべての変更DIV ONEオプションは常に選択されます（セレクタ.a1オプションを持つオプション配列の最初のものです）。あなたは自動的に変更を加えたいんどのdivの下に指定する必要が

SOLUTION

。 同じdiv内のすべてのセレクタを同時に変更したいと思います。

divを指定するのに$(this).parent()を使用しました。次に、希望の選択オプションを見つけます。

fiddleをご覧ください。