javascript限制多级子输入的表单选项答案

【问题标题】：javascript to limit form options on multiple level children inputsjavascript限制多级子输入的表单选项
【发布时间】：2021-04-15 05:35:09
【问题描述】：

总结如下：

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

如果kingdom = Animalia 则phylum 选项应该是某个列表。

接下来，如果phylum then = Chordata 下一个下拉输入选项应该是某个列表。

要继续，如果class = Mammalia 下一个下拉输入选项应该是某个列表...等等。

因此是一种具有许多依赖级别的分层形式。

我已经查看并尝试了一些示例，但我找不到执行此操作的方法。有什么想法/建议吗？

这是引导 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>

【问题讨论】：

标签： javascript forms bootstrap-4

【解决方案1】：

也许有点懒，但它有效如果你有类似的想法

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

【讨论】：

这看起来可以完成这项工作，只是测试它。
那么，效果很好...除了...提交了value，而不是下拉列表中的文本，有什么办法可以解决这个问题吗？

【解决方案2】：

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

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

function hideSubset(selectedValue){
    
    let secondChoice = document.querySelector('#secondChoice');
    let firstChoice = document.querySelector('#firstChoice');

    if (selectedValue === 'Animalia'){
        
        secondChoice.style.display = 'none';
        firstChoice.style.display = 'block';
        
    } else {
        
        firstChoice.style.display = 'none';
        secondChoice.style.display = 'block';
    }
}


let mainChoice = document.querySelector('#mainChoice');

mainChoice.addEventListener('change', function(){
    hideSubset(mainChoice.value);
}, false);

<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' id="mainChoice">
        <option>Choose one</option>
        <option>Animalia</option>
        <option>Plantae</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' id="firstChoice">
    <div class='form-group'>
      <label for='uname'>Options for Animalia</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>

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

  <div class='col-12 left' id="secondChoice">
    <div class='form-group'>
      <label for='uname'>Options for Plantae</label>
      <!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
      <select class="form-control" name='phylum'>
        <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>

我这边是这样的。我使用引导程序 4

Looks like this when loading

When choosing Animalia

When choosing Plantae

【讨论】：