JQuery - 드롭 다운 목록에서 선택한 종속성

Question

서로에 대한 드롭 다운 목록 옵션 의존성에 대한 도움이 필요합니다. 아래에 두 개의 드롭 다운리스트가 있다고 가정 해 보겠습니다.

<select name="List1" id="List1"> 
    <option value="">Select Item</option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
    <option value="d">d</option>    
</select> 

<select id="List2" name="List2"> 
    <option value="">Select Item</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

Scenerios는 아래 :

는 는

는
1. 은 목록 2는 기본적으로 모든 (목록 1에서 선택 사항 없음)
2. 옵션의 경우 목록 1에서 선택한 "a"또는 "D"를 나열합니다 다음 목록 2는 여전히 동일하게 유지됩니다 옵션을 선택하지 않았습니다.
3. List2에서 옵션 "b"또는 "c"를 선택한 경우 List2의 옵션 2가 선택되고 사용자는 List2에서 다른 옵션을 선택할 수 없습니다.
4. 그러나 사용자가 다시 "a"또는 "d"를 선택하면 목록이 다시 기본값으로 돌아가고 사용자는 List2의 항목을 선택할 수 있습니다.

가능한 경우 샘플 코드를 사용하십시오. 그것은 논리처럼 보인다

감사합니다,

Answer 1

그래서 우리는 정말 일반화 할 수없는 자세한 내용을 알지 못하고, 매우 구체적이다. 그러나이 jsFiddle은 적어도 시작해야합니다.

// Listen for change event on List1 
$("#List1").change(function (e) { 

    // Find the selected value from List1 
    var selectedValue = $(this).val(); 
    var $list2 = $("#List2"); 

    if (selectedValue == 'a' || selectedValue == 'd') { 

     // Reset disabled options for List2 
     $list2.find("option").removeAttr('disabled'); 

     // If you want to change the value of List2 back to some default... 
     //list2.val(''); 
    } 

    if (selectedValue == 'b' || selectedValue == 'c') { 

     // Select option 2 for List2 
     $list2.val('2'); 

     // Disable all other options 
     $list2.find("option:not(:selected)").attr('disabled', 'disabled'); 
    } 
}); 

당신은 목록 1의 옵션 클래스를 추가해야 일반화 (같은 class="reset-other-list" 또는 class="restrict-other-list") : 여기에 해당 자바 스크립트입니다. 그런 다음 특정 값을 검사하는 대신 해당 값이 class 인 옵션이 선택되었는지 확인하십시오. 미래에 가치가 바뀌면 두통이 줄어 듭니다.