드롭 다운 상자 선택에 따라 선택 상자 표시 또는 숨기기

Question

첫 번째 선택 상자 옵션을 기반으로 선택 상자를 숨기거나 표시하려고합니다. 나는 왜 그것이 작동하지 않는 지 잘 모르겠다. 또 다른 한가지는, 어떻게 하나의 섹션에 여러 개의 ID를 추가 할 수 있습니까 (사용자가 "프로젝트"또는 "모델"을 선택 상자 2 표시)?

선택 박스 1 :

<select name="category_0" id="category_0" onchange="qa_category_select('category');" class="king-form-tall-select" style="display: none;"> 
    <option value=""></option> 
    <option value="1">Projects</option> 
    <option value="2">Mods</option> 
</select> 

<span id="category_0_sub"> 
<select name="category_1" id="category_1" onchange="qa_category_select('category');" class="king-form-tall-select"> 
<option value="" selected=""></option> 
<option value="1">Projects</option> 
<option value="2">Mods</option> 
</select> 
<span id="category_1_sub"> <select name="category_2" id="category_2" onchange="qa_category_select('category');" class="king-form-tall-select"> 
<option value="" selected=""></option> 
<option value="124">3D Art</option> 
<option value="125">Adventure</option> 
</select> 
</span></span> 

선택 박스 2 : HTML에서

<select name="extra1" class="king-form-tall-select"> 
<option value="" selected=""></option> 
<option value="value36">1.11</option> 
<option value="value1">Older</option> 
</select> 

JS :

<script> 
$(document).ready(function(){ 
    $('#category_1').on('change', function() { 
     if (this.value == '1') 
     { 
     $("#extra1").show(); 
     } 
     else 
     { 
     $("#extra1").hide(); 
     } 
    }); 
}); 
</script> 

사람이 나를 알려 주시기 바랍니다 해결하는 방법에 대한 아이디어가 있다면. posibleValues는 (제 경우 그에 따라 프로젝트 및 개조 1 및 2)를 제 2 선택을 표시하도록 모든 선택 값의 배열이다

Answer 1

<script> 
$(document).ready(function(){ 
    var possibleValues = [1, 2]; 
    $('#category_1').on('change', function() { 
     $("#extra1").toggle(possibleValues.indexOf(+this.value) !== -1); 
    }); 
}); 
</script> 

. 따라서 두 번째 선택 항목에 여러 개의 ID를 추가 할 필요가 없습니다 (ID가 고유하고 단일 단어 임)

또한 @Satpal은 두 번째 선택 항목에 ID "extra1"을 추가해야합니다