プライマリドロップダウンを選択し、他のドロップダウンで同じ値のオプションを選択します。

Question

プライマリドロップダウンが変更されたら、それに応じて他のドロップダウンを変更します。

しかし、私は、第二は、それに応じて値を変更するには失敗しながらのみ第一の他のドロップダウンがに取り組んでいる理由を知りません。私は 私は2番目のドロップダウンの名前を1番目のドロップダウンと同じに変更した場合、それが動作することを認識しています。

しかし、それらはdbに保存される異なるフィールドであるため、名前は異なる必要があります。

解決方法はありますか。どうもありがとう。

function setDropDown() { 
 
    var index_name = 
 
    document.getElementsByName('ForceSelection')[0].selectedIndex; 
 
    var others = document.getElementsByName('Qualifications'); 
 
    for (i = 0; i < others.length; i++) 
 
    others[i].selectedIndex = index_name; 
 

 
    var others2 = document.getElementsByName('Qualifications2'); 
 
    for (i = 0; i < others2.length; i++) 
 
    others2[i].selectedIndex = index_name2; 
 
}

Primary dropdown<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();"> 
 
<option value="" selected>Select</option> 
 
<option value="treatmentid1">treatmentname1</option> 
 
<option value="treatmentid2">treatmentname2</option> 
 
</select> other dropdown 
 
<select id="Qualifications" name="Qualifications"> 
 
    <option value="select">select</option> 
 
    <option value="treatmentid1">treatmentname1</option> 
 
    <option value="treatmentid2">treatmentname2</option> 
 
</select> other dropdown2 
 
<select id="Qualifications2" name="Qualifications2"> 
 
    <option value="select">select</option> 
 
    <option value="treatmentid1">treatmentname1</option> 
 
    <option value="treatmentid2">treatmentname2</option> 
 
</select>

Answer 1

への感謝を追加、私は私のコードでSTHを定義していないが判明cssクラスをセカンダリドロップダウンに追加し、document.querySelectorAllを使用してすべてを一度に取得します。

次に、ループを使用してselectedIndexを更新することができます。

function setDropDown() { 
 
    var index_name = 
 
    document.getElementsByName('ForceSelection')[0].selectedIndex; 
 
    var others = document.querySelectorAll('.secondary'); 
 
    for (var i = 0; i < others.length; i++) { 
 
    others[i].selectedIndex = index_name; 
 
    } 
 

 
}

div { 
 
    padding: 15px; 
 
}

<div><b>Primary dropdown:</b> 
 
    <select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();"> 
 
<option value="" selected>Select</option> 
 
<option value="treatmentid1">treatmentname1</option> 
 
<option value="treatmentid2">treatmentname2</option> 
 
</select> 
 
</div> 
 
<div> 
 
    <b>Other dropdown 1</b>: 
 
    <select class='secondary' id="Qualifications" name="Qualifications"> 
 
    <option value="select">select</option> 
 
    <option value="treatmentid1">treatmentname1</option> 
 
    <option value="treatmentid2">treatmentname2</option> 
 
</select></div> 
 
<div> <b>Other dropdown 1</b>: 
 
    <select class='secondary' id="Qualifications2" name="Qualifications2"> 
 
    <option value="select">select</option> 
 
    <option value="treatmentid1">treatmentname1</option> 
 
    <option value="treatmentid2">treatmentname2</option> 
 
</select> 
 
</div>

Answer 2

だから、@Tiny巨人のことを指摘

function setDropDown() { 
 
    var index_name = 
 
    document.getElementsByName('ForceSelection')[0].selectedIndex; 
 
    
 
    var index_name2 = 
 
    document.getElementsByName('ForceSelection')[0].selectedIndex; 
 
    
 
    var others = document.getElementsByName('Qualifications'); 
 
    for (i = 0; i < others.length; i++) 
 
    others[i].selectedIndex = index_name; 
 

 
    var others2 = document.getElementsByName('Qualifications2'); 
 
    for (j = 0; j < others2.length; j++) 
 
    others2[j].selectedIndex = index_name2; 
 
}

Primary dropdown<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();"> 
 
<option value="" selected>Select</option> 
 
<option value="treatmentid1">treatmentname1</option> 
 
<option value="treatmentid2">treatmentname2</option> 
 
</select> other dropdown 
 
<select id="Qualifications" name="Qualifications"> 
 
    <option value="select">select</option> 
 
    <option value="treatmentid1">treatmentname1</option> 
 
    <option value="treatmentid2">treatmentname2</option> 
 
</select> other dropdown2 
 
<select id="Qualifications2" name="Qualifications2"> 
 
    <option value="select">select</option> 
 
    <option value="treatmentid1">treatmentname1</option> 
 
    <option value="treatmentid2">treatmentname2</option> 
 
</select>