jquery/javascript 요소 종속 드롭 다운 목록

Question

다른 드롭 다운의 선택한 옵션에 따라 하나의 선택 드롭 다운에서 옵션을 표시하거나 숨길 필요가 있습니다.

"기타"를 선택하면 나머지 드롭 다운 전체 목록 (남성 & 여성)에 표시됩니다. 그리고 "mr. engineer"를 선택하면 "남성" 가 표시되고 "miss. engineer"를 선택하면 "female"이 표시됩니다.

<select> 
<option value="">Choose</option> 
<option value="Mr">Mr. Engineer</option> 
<option value="Miss">Miss. Engineer</option> 
<option value="other">Other</option> 

</select> 

<select> 
<!--Below shows when 'Other' is selected , and show otherwise--> 
<option value="0">choose</option> 

<!--Below shows when 'Mr. engineer' is selected jsut , and hidden otherwise--> 
<option value="male">Male</option> 

<!--Below shows when 'Miss. engineer' is selected just, and hidden otherwise--> 
<option value="female">Female</option> 

</select> 

Answer 1

당신은 change를 사용하여 수행 할 수 있습니다

$("#dropdownlist").change(function() { 
    var control = $(this); 

    if (control.val() == "Engineer") { 
     $("#dropdownlist2").show(); 
    } 
}); 

이는 다음과 같은 구조를 기반으로 : 이러한 상황에서

<select id="dropdown1"> 
    <option value="Mechanic">Mechanic </option> 
    <option value="Engineer">Engineer</option> 
</select> 

<select id="dropdown2" style="display:none"> 
    <option value="Item 1">Item 1 </option> 
    <option value="Item 2">Item 2 </option> 
</select> 

http://jsfiddle.net/zs3QG/

Answer 2

, 나는 보통 매핑에 의존 HTML 자체의 선택 항목과 해당 매핑을 사용하는 사이의 값 JS에서 하드 - 와이어 링하는 대신 JS에서.

예 : appliesto 속성은 select1의 각 옵션에 적용 할 수있는 select2의 옵션을 매핑합니다.

<select id="one"> 
    <option>Choose</option> 
    <option appliesto="male">Mr. Engineer</option> 
    <option appliesto="female">Miss. Engineer</option> 
    <option appliesto="other">Other</option> 
</select> 

<select id="two"> 
    <option type="other">choose</option> 
    <option type="male">Male</option> 
    <option type="female">Female</option> 
</select> 

그리고 이러한 매핑을 사용하여 JS를 통해 필요에 따라 표시/숨기기를 할 수 있습니다.

$('select#one').change(function() { 
    var selType = $(this).find('option:selected').attr('appliesto'); 
    $('select#two option[type="'+selType+'"]').prop('selected', true); 
}); 

확인이 데모 : 물론 http://jsfiddle.net/xGJRP/1/

당신이 더 미세 조정해야 할 수도 있습니다,하지만 난 당신이 아이디어를 얻을 생각합니다.