何百ものエントリで別のドロップダウンに依存する自動選択ドロップダウン

Question

私は初心者のプログラマーです。これは私の非常に第一のstackoverflowに関する質問です。

は私JSfiddleを参照してください：https://jsfiddle.net/azzaeff/ug1eo5rp/

$('select[id=scholarid]').change(function(event) { 
    var scholarids = $(this).val(); 
    if (scholarids == 'A001') 
     $('select[id=scholarname]').val('Derrick B. Bailey'); 
    else if (scholarids == 'A002') 
     $('select[id=scholarname]').val('Amber J. Holt'); 
    else if (scholarids == 'A003') 
     $('select[id=scholarname]').val('Tracy B. Serrano'); 
}); 

$('select[id=scholarname]').change(function(event) { 
    var scholarnames = $(this).val(); 
    if (scholarnames == 'Derrick B. Bailey') 
     $('select[id=scholarid]').val('A001'); 
    else if (scholarnames == 'Amber J. Holt') 
     $('select[id=scholarid]').val('A002'); 
    else if (scholarnames == 'Tracy B. Serrano') 
     $('select[id=scholarid]').val('A003'); 
}); 

あなたは、私が別のドロップダウン、「学者ID」に基づいて、オートセレクト「学者」ドロップダウンを作成していることがわかります。例：IDをA003に変更すると、名前のドロップダウンがTracy B. Serranoに変わります。逆も同様です。名前のドロップダウンを変更すると、割り当てられたIDも変更されます。例：名前をDerrick B.に変更します。BaileyはIDをA001に変更します。

これは完璧に機能します。しかし、あなたが見ることができるように、この例は単に3つの名前/ IDを使用しているだけです。

個人的には、10個または20個の名前/ idsのドロップダウンを作成する必要がある場合は個人的には大丈夫ですが、現在はIDと名前の組み合わせが何百もあります。私は、何度も何度も 'if-else'の組み合わせを繰り返し書くことは実用的ではないと思います。私は、配列などを使って、言い換えると、よりよい方法があるはずだと思います。しかし、私は個人的にこれを行う方法やそれを探す方法を見つけることができませんでした。

誰でも簡単なコードを書いて何百ものエントリを書くことができたら、私は非常に感謝しています。あるいは、既にこのフォーラムやフォーラムにこれに似た答えがある場合は、それを指摘することもできます。

Answer 1

あなたのアプリケーションロジックは私には奇妙に見えます。それが1対1のマッピングの場合は、選択するだけで、ユーザーが名前を選択できるようにするのはなぜですか？とにかく、これをアーカイブできる多くの方法がありますが、まず100または1000のレコードをどのように保存するか計画する必要があります。何とかあなたのデータは以下のようなものを、マップを使用するためにインデックスを使用できない場合

$("#s1").change(function(){ 
 
    $("#s2 option").eq($(this).prop("selectedIndex")).prop("selected", "selected"); 
 
}); 
 

 
$("#s2").change(function(){ 
 
    $("#s1 option").eq($(this).prop("selectedIndex")).prop("selected", "selected"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="s1"> 
 
    <option value="A001">A001</option> 
 
    <option value="A002">A002</option> 
 
    <option value="A003">A003</option> 
 
</select> 
 

 
<select id="s2"> 
 
    <option value="John">John</option> 
 
    <option value="Calvin">Calvin</option> 
 
    <option value="Mark">Mark</option> 
 
</select>

：：私は今見ることができることは一から一であるので、もっと簡単な方法は、以下のように選択されたインデックスを使用している

$("#s1").change(function(){ 
 
    $("#s2 option[data-mapping=" + $(this).val() + "]").prop("selected", "selected"); 
 
}); 
 

 
$("#s2").change(function(){ 
 
    $("#s1").val($(this).find(":selected").data("mapping")); 
 
}); 
 

 
$("#s1").trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="s1"> 
 
    <option value="A001">A001</option> 
 
    <option value="A002">A002</option> 
 
    <option value="A003">A003</option> 
 
</select> 
 

 
<select id="s2"> 
 
    <option value="John" data-mapping='A002'>John</option> 
 
    <option value="Calvin" data-mapping='A003'>Calvin</option> 
 
    <option value="Mark" data-mapping='A001'>Mark</option> 
 
</select>