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

Question

我正在尝试根据第一个选择框选项隐藏或显示选择框。 我不太确定为什么不起作用。 另一件事是，如何在一个部分中添加多个ID（如果用户选择“项目”或“ mods”以显示选择框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：

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

HTML中的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是所有选择值的数组（在我的情况下，项目和Mod分别为1和2），应显示第二个选择。 因此，您无需在第二选择中添加多个ID（您也不能这样做，ID是唯一的单个单词）

此外，正如@Satpal注意到的那样，您需要在第二选择中添加ID“ extra1”