ドロップダウンボックスの選択に基づいて選択ボックスを表示または非表示にします

Question

最初の選択ボックスオプションに基づいて選択ボックスを非表示または表示しようとしています。私は本当になぜそれが動作していないのか分からない。別のことは、1つのセクションに複数の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> 

誰もがこの問題を解決する方法についてのアイデアを持っている場合は私に知らせてください。

Answer 1

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

ここposibleValuesは、第2の選択を示すべきである（私の場合はそれに応じてプロジェクトと改造するための1及び2）すべての選択値の配列です。 2番目の選択に複数のIDを追加する必要はありません（これもできません。idはユニークで1つの単語です）

また、@SatpalがID「extra1」を2番目の選択に追加する必要があることに気づきました