javascript将表单选项限制在多个级别的子输入上

我有以下表格，总结如下：

王国-->门-->类-->目-->科-->属

如果

kingdom=Animalia

，则

门

选项应为特定列表

接下来，如果

门

那么=

Chordata

下一个下拉输入选项应该是某个列表

要继续，如果

类

=

哺乳动物

下一个下拉输入选项应该是某个列表。。。等等

因此，这是一个具有许多依赖级别的分层形式

我已经看过并尝试了一些例子，但我找不到一种方法来做到这一点。有什么想法/建议吗

以下是引导html：

              <div class='col-12 left'>
                <div class='form-group'>
                  <label for='uname'>kingdom</label>
                  <!-- <input type='text' class='form-control' name='kingdom' value ='Animalia' placeholder='Animalia' > -->


                  <select class="form-control" name='kingdom'>
                    <option>Animalia</option>
                    <option>Plantae</option>
                    <option>Fungi</option>
                    <option>Protista</option>
                    <option>Monera</option>
                  </select>
                  <div class='valid-feedback'>Valid.</div>
                  <div class='invalid-feedback'>Please fill out this field.</div>
                </div>
              </div>

              <div class='col-12 left'>
                <div class='form-group'>
                  <label for='uname'>phylum/division</label>
                  <!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
                  <select class="form-control" name='phylum'>
                    <option>Chordata</option>
                    <option>Annelid</option>
                    <option>Arthropod</option>
                    <option>Bryozoa</option>
                    <option>Cnidaria</option>
                    <option>Echinoderm</option>
                    <option>Mollusc</option>
                    <option>Nematode</option>
                    <option>Platyhelminthes</option>
                    <option>Rotifer</option>
                    <option>Sponge</option>

                  </select>
                  <div class='valid-feedback'>Valid.</div>
                  <div class='invalid-feedback'>Please fill out this field.</div>
                </div>
              </div>

              <div class='col-12 left'>
                <div class='form-group'>
                  <label for='uname'>class</label>
                  <!-- <input type='text' class='form-control' name='class' value ='Mammalia' placeholder='Mammalia' > -->
                  <select class="form-control" name='class'>
                    <option>Mammalia</option>
                    <option>Aves</option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                  </select>
                  <div class='valid-feedback'>Valid.</div>
                  <div class='invalid-feedback'>Please fill out this field.</div>
                </div>
              </div>

              <div class='col-12 left'>
                <div class='form-group'>
                  <label for='uname'>order</label>
                  <!-- <input type='text' class='form-control' name='order' value ='Artiodactyla' placeholder='Artiodactyla' > -->
                  <select class="form-control" name='order'>
                    <option>Artiodactyla</option>
                    <option>Aegotheliformes</option>
                    <option>Perissodactyla</option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                  </select>
                  <div class='valid-feedback'>Valid.</div>
                  <div class='invalid-feedback'>Please fill out this field.</div>
                </div>
              </div>

              <div class='col-12 left'>
                <div class='form-group'>
                  <label for='uname'>family</label>
                  <!-- <input type='text' class='form-control' name='family' value ='Bovidae' placeholder=' Bovidae' > -->
                  <select class="form-control" name='family'>
                    <option>Bovidae</option>
                    <option>Aegothelidae</option>
                    <option>Equidae</option>
                    <option>Delphinidae</option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                  </select>
                  <div class='valid-feedback'>Valid.</div>
                  <div class='invalid-feedback'>Please fill out this field.</div>
                </div>
              </div>

              <div class='col-12 left'>
                <div class='form-group'>
                  <label for='uname'>genus</label>
                  <input type='text' class='form-control' name='genus' value ='Capra' placeholder='Capra' > 
                  <select class="form-control" name='genus'>
                    <option>Capra</option>
                    <option>Ovis</option>
                    <option>Aegotheles</option>
                    <option>Oreamnos</option>
                    <option>Equus</option>
                    <option>Orcinus</option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                  </select>
                  <div class='valid-feedback'>Valid.</div>
                  <div class='invalid-feedback'>Please fill out this field.</div>
                </div>
              </div>

              <div class='col-12 left'>
                <div class='form-group'>
                  <label for='uname'>subgenus</label>
                  <input type='text' class='form-control' name='subgenus' value ='Capra (aegagrus) hircus' placeholder='Capra (aegagrus) hircus' >

                  <div class='valid-feedback'>Valid.</div>
                  <div class='invalid-feedback'>Please fill out this field.</div>
                </div>
              </div>

              <div class='col-12 left'>
                <div class='form-group'>
                  <label for='uname'>elementName</label>
                  <!-- <input type='text' class='form-control' name='elementName' value ='a' placeholder='' > -->
                  <select class="form-control" name='elementName'>
                    <option>Cranium</option>
                    <option>Mandible</option>
                    <option>Teeth</option>
                    <option>Rib</option>
                    <option>Humerus</option>
                    <option>Ulna</option>
                    <option>Radius</option>
                    <option>Carpal</option>
                    <option>Metacarpal</option>
                    <option>Femur</option>
                    <option>Patela</option>
                    <option>Fibula</option>
                    <option>Tarsal</option>
                    <option>Metatarsal</option>
                    <option>Scapula</option>
                    <option>Vertebrae</option>
                    <option>Middle Phalanx</option>
                    <option>Phalanx</option>
                    <option>Tibia</option>
                    <option>Astragalus</option>
                    <option>Calcaneus</option>
                    <option>Proximal Phalanx</option>
                  </select>
                  <div class='valid-feedback'>Valid.</div>
                  <div class='invalid-feedback'>Please fill out this field.</div>
                </div>
              </div>

王国
动物
足底
真菌
原生动物
莫内拉
有效。
请填写这个字段。
门/科
脊索动物
环节动物
节肢动物
苔藓虫
蛇床子属
棘皮动物
软体动物
线虫
扁形动物
轮虫
海绵
有效。
请填写这个字段。
班
哺乳动物
鸟类
有效。
请填写这个字段。
秩序
偶蹄目
盾形目
指周虫
有效。
请填写这个字段。
家庭
牛科
山羊科
马科
飞燕科
有效。
请填写这个字段。
属
卡普拉
奥维斯
裸鼻鸱属
雪羊属
马驹
虎鲸属
有效。
请填写这个字段。
亚属
有效。
请填写这个字段。
元素名
头盖骨
下颚
牙齿
肋骨
肱骨
尺骨
半径
腕关节
掌骨
股骨
帕特拉
腓骨
跗骨
跖骨
肩胛骨
椎骨
中方阵
方阵
胫骨
黄芪
跟骨
近节指骨
有效。
请填写这个字段。

我提取了html的一部分，并使用事件侦听器来隐藏不需要的选项。我希望这有助于：

我只考虑了前两个类别来展示“Animalia”和“Plantae”示例，并考虑了每个类别的两个选项子集。select标记上的change事件触发代码根据需要隐藏和显示

函数隐藏子集（selectedValue）{
设secondChoice=document.querySelector（“#secondChoice”）；
让firstChoice=document.querySelector（“#firstChoice”）；
如果（selectedValue==='Animalia'）{
secondChoice.style.display='none'；
firstChoice.style.display='block'；
}否则{
firstChoice.style.display='none'；
secondChoice.style.display='block'；
}
}
让mainChoice=document.querySelector（“#mainChoice”）；
mainChoice.addEventListener（'change'，function（））{
hideSubset（mainChoice.value）；
}，假）

王国
选一个
动物
足底
有效。
请填写这个字段。
动物的选择
脊索动物
环节动物
节肢动物
苔藓虫
蛇床子属
棘皮动物
有效。
请填写这个字段。
车前草的选择
<div class="form-group" >
    <select class="form-control" id="sel0">
        <option value="0">Choose</option>
        <option value="1">Audi</option>
        <option value="2">BMW</option>
    </select>
    <br>
    <select class="form-control dispnone" id="sel1_1">
        <option value="0">Choose</option>
        <option value="1">A4</option>
        <option value="2">RS8</option>
    </select>
    <select class="form-control dispnone" id="sel1_2">
        <option value="0">Choose</option>
        <option value="1">E36</option>
        <option value="2">X5</option>
    </select>
    <select class="form-control dispnone" id="sel2_1">
        <option value="0">Choose</option>
        <option value="1">120LE</option>
        <option value="2">140LE</option>
    </select>
    <select class="form-control dispnone" id="sel2_2">
        <option value="0">Choose</option>
        <option value="1">cyl8</option>
        <option value="2">cyl16</option>
    </select>

<script type="text/javascript">
    $(document).ready(function() {
        var select_nums = 3;
        $("#sel0").change(function() {
            var ch = $("#sel0").val();
            if(ch==0){
                for (var i = 1; i < select_nums; i++) {
                    $('#sel1_'+i).css({'display':'none'});
                }
                $('#sel1_'+ch).css({'display':'block'});
            }else if(ch==1){
                for (var i = 1; i < select_nums; i++) {
                    $('#sel1_'+i).css({'display':'none'});
                }
                  $('#sel1_'+ch).css({'display':'block'});
            }else if(ch==2){
                for (var i = 1; i < select_nums; i++) {
                    $('#sel1_'+i).css({'display':'none'});
                }
                $('#sel1_'+ch).css({'display':'block'});
            }
        });

        $("#sel1_1").change(function() {
            var ch = $("#sel1_1").val();
            if(ch==0){
                for (var i = 1; i < select_nums; i++) {
                    $('#sel2_'+i).css({'display':'none'});
                }
                $('#sel2_'+ch).css({'display':'block'});
            }else if(ch==1){
                for (var i = 1; i < select_nums; i++) {
                    $('#sel2_'+i).css({'display':'none'});
                }
                $('#sel2_'+ch).css({'display':'block'});
            }else if(ch==2){
                for (var i = 1; i < select_nums; i++) {
                    $('#sel2_'+i).css({'display':'none'});
                }
                $('#sel2_'+ch).css({'display':'block'});
            }
        });

    });
</script>