自動選擇下拉菜單取決於另一個下拉菜單，反之亦然，有數百個條目

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個名稱/ ID編寫下拉菜單，但現在有數百個ID和名稱的組合，那麼我確定。我認爲數百次重複編寫'if-else'組合是不可行的。我認爲應該有更好的方式來編寫，例如使用數組或其他。但我個人無法找到一種方法來做到這一點，或搜索它。

如果有人可以幫助編寫數百個條目的簡化代碼，我將非常感激。或者，如果在這個論壇或任何論壇中已經有類似的答案，您也可以指出。

Answer 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>