根据下拉框选择显示或隐藏Selectbox

Question

我正在尝试基于第一个selectbox选项隐藏或显示Selectbox。我不太确定为什么它不起作用。另一件事是，如何在一个部分中添加多个ID（如果用户选择"项目"或" mod"以显示Selectbox 2）？

selectbox 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>

selectbox 2：

<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 in HTML：

<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是所有选择值的数组（在我的情况下，项目和mod是1和2），应显示第二个选择。因此，您无需将多个ID添加到第二选择（也无法执行此操作，ID是唯一的，单词是唯一的）

另外，正如@satpal注意到的那样，您需要将ID" Extra1"添加到第二个选择