자동 선택 드롭 다운은 다른 드롭 다운에 의존하고 그 반대의 경우도 수백 가지의 항목이 있습니다.

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와 이름의 조합이 수백 가지가 될 수 있습니다. 나는 수백 번 반복해서 '만약 - 다른'조합을 쓰는 것이 매우 실용적이지 않다고 생각한다. 필자는 배열 등을 사용하여 더 좋은 방법으로 작성해야한다고 생각합니다. 하지만 개인적으로이를 수행하거나 검색하는 방법을 찾지 못했습니다.

누구든지 수백 개의 항목에 대해 간단한 코드 작성을 도울 수 있다면 매우 감사하겠습니다. 또는 이미이 포럼이나 포럼에 비슷한 답변이있는 경우이를 지적 할 수도 있습니다.

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>

: 내가 지금 볼 수있는 것은 1-1 때문에, 쉬운 방법은 아래에서 선택한 인덱스를 사용

$("#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>