Hide Show Toggle-Felder in HTML durch JS

Question

<form> 
    <div class="col-lg-3"> 
     <div class="control-group"> 
      <label class="control-label" for="select01">Mode of Test:</label> 
       <div class="controls"> 
        <select id="age" name="age" class="form-control"> 
         <option value=''> - Select - </option> 
         <option value="14">Online</option>    
         <option value="13">Written</option>         
        </select> 
       </div> 
      </div> 
     </div> 
     <div class="control-group" id="parentPermission" style="display: none"> 
      <label class="control-label" for="organization" >Venue :</label> 
      <div class="controls"> 
       <input type="text" class="form-control input-xlarge" id="txtPassportNumber" name="parent_name">     
      </div> 
     </div>        
     <div class="control-group" id="Permission" style=""> 
      <label class="control-label" for="organization">Test Link :</label> 
      <div class="controls"> 
       <input type="text" class="form-control input-xlarge" id="organization" name="organization">     
      </div> 
     </div> 
     <div class="control-group" id="Permission" style=""> 
      <label class="control-label" for="organization">Upload Guide Line Document & Instruction Message :</label> 
      <div class="controls"> 
       <input type="text" class="form-control input-xlarge" id="organization" name="organization"> 
       <input type="file" name="img" multiple> 
      </div> 
     </div> 
</form> 
<script> 
$(document).ready(function() { 
    toggleFields(); 
    $("#age").change(function() { 
     toggleFields(); 
    }); 

}); 
function toggleFields() { 
    if ($("#age").val() <= 13) 
     $("#parentPermission").show(); 
    else 
     $("#parentPermission").hide(); 
} 
</script> 

wenn ich auf ONLINE-Test Link und Upload-Guide klicken sollte angezeigt werden und Veranstaltungsort sollte ausgeblendet werden. Und wenn ich auf "Geschrieben" klicke, sollte der Veranstaltungsort angezeigt werden und der Link "&" sollte ausgedruckt werden. Ich habe versucht, versteckte Toggle-Methode zu zeigen, kann jemand mir dabei helfen.

Answer 1

Sie müssen die richtigen Abschnitte ein- und ausblenden, nicht nur ausblenden. Außerdem haben Sie mehrere Elemente mit der idPermission, die nicht korrekt ist.

Was ich hier getan habe, ist nur hinzugefügt group1 und group2 Klassen zu den zwei verschiedenen Abschnitten und dann zeigen sie und verbergen sie entsprechend. Zunächst (über CSS) sind beide Bereiche ausgeblendet.

Beim Verbinden des Ereignishandlers toggleFields umschließt der Code den Aufruf in einer anonymen Funktion, die nicht erforderlich ist. Sie rufen auch toggleFields, sobald das Dokument bereit ist, die auch nicht benötigt wird, da alle Felder standardmäßig ausgeblendet werden.

$(function() { 
 
    $("#age").on("change", toggleFields); 
 
}); 
 

 
function toggleFields() { 
 
    switch (parseInt($("#age").val())) { 
 
     case 13: 
 
     $(".group1").show(); 
 
     $(".group2").hide(); 
 
     break; 
 
     case 14: 
 
     $(".group2").show(); 
 
     $(".group1").hide(); 
 
     break; 
 
    } 
 
}

.group1, .group2 {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="col-lg-3"> 
 
     <div class="control-group"> 
 
      <label class="control-label" for="select01">Mode of Test:</label> 
 
       <div class="controls"> 
 
        <select id="age" name="age" class="form-control"> 
 
         <option value=''> - Select - </option> 
 
         <option value="14">Online</option>    
 
         <option value="13">Written</option>         
 
        </select> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="control-group group1" id="parentPermission"> 
 
      <label class="control-label" for="organization" >Venue :</label> 
 
      <div class="controls"> 
 
       <input type="text" class="form-control input-xlarge" id="txtPassportNumber" name="parent_name">     
 
      </div> 
 
     </div>        
 
     <div class="control-group group2" id="Permission"> 
 
      <label class="control-label" for="organization">Test Link :</label> 
 
      <div class="controls"> 
 
       <input type="text" class="form-control input-xlarge" id="organization" name="organization">     
 
      </div> 
 
     </div> 
 
     <div class="control-group group2" id="Permission" style=""> 
 
      <label class="control-label" for="organization">Upload Guide Line Document & Instruction Message :</label> 
 
      <div class="controls"> 
 
       <input type="text" class="form-control input-xlarge" id="organization" name="organization"> 
 
       <input type="file" name="img" multiple> 
 
      </div> 
 
     </div> 
 
</form>

Answer 2

Was können Sie tun, ist Legen Sie Ihre Online-Teil des Codes in einem div uns mit der ID als Online- und Offline-Teil in einem div mit id wie offline lassen sagen.

Am Anfang halten Sie nichts ausgewählt und dann, wenn online ausgewählt ist, zeigen Sie die Online-Div beim Verstecken des Offline-und wenn der Offline ausgewählt ist, zeigen Sie offline und ausblenden Online-Teil.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="col-lg-3"> 
 
     <div class="control-group"> 
 
      <label class="control-label" for="select01">Mode of Test:</label> 
 
       <div class="controls"> 
 
        <select id="testType" name="age" class="form-control"> 
 
         <option value='' selected disabled> - Select - </option> 
 
         <option value="14">Online</option>    
 
         <option value="13">Written</option>         
 
        </select> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="control-group" id="offline" style="display: none"> 
 
      <label class="control-label" for="organization" >Venue :</label> 
 
      <div class="controls"> 
 
       <input type="text" class="form-control input-xlarge" id="txtPassportNumber" name="parent_name">     
 
      </div> 
 
     </div> 
 
     
 
     
 
     <div id="online" style="display:none;"> 
 
     <div class="control-group" style=""> 
 
      <label class="control-label" for="organization">Test Link :</label> 
 
      <div class="controls"> 
 
       <input type="text" class="form-control input-xlarge" id="organization" name="organization">     
 
      </div> 
 
     </div> 
 
     <div class="control-group" style=""> 
 
      <label class="control-label" for="organization">Upload Guide Line Document & Instruction Message :</label> 
 
      <div class="controls"> 
 
       <input type="text" class="form-control input-xlarge" id="organization" name="organization"> 
 
       <input type="file" name="img" multiple> 
 
      </div> 
 
     </div> 
 
     </div> 
 
</form> 
 
<script> 
 
$(document).ready(function() { 
 
    $("#testType").change(function() { 
 
     toggleFields(); 
 
    }); 
 

 
}); 
 
function toggleFields() { 
 
    if ($("#testType").val() == 14) 
 
    { 
 
     $("#offline").hide(); 
 
     $("#online").show(); 
 
    } 
 
    else 
 
    { 
 
     $("#online").hide(); 
 
     $("#offline").show(); 
 
    } 
 
} 
 
</script>

Ein einfacheres Beispiel kann sein:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="testType"> 
 
<option value = "" selected disabled>Select mode</option> 
 
<option value = "online">Online</option> 
 
<option value = "offline">Offline</option> 
 
</select> 
 
<hr/> 
 
<br/> 
 
<div id="online" style="display:none;">I am online part</div> 
 
<br/> 
 
<div id="offline" style="display:none;">I am offline part</div> 
 
<br/> 
 

 

 

 
<script> 
 
$(document).ready(function() { 
 
    $("#testType").change(function() { 
 
     toggleFields(); 
 
    }); 
 

 
}); 
 
function toggleFields() { 
 
    if ($("#testType").val() == "online") 
 
    { 
 
     $("#offline").hide(); 
 
     $("#online").show(); 
 
    } 
 
    else 
 
    { 
 
     $("#online").hide(); 
 
     $("#offline").show(); 
 
    } 
 
} 
 
</script>

UPDATE

Wie @ Scott Marcus vorgeschlagen können Sie einfach die Callback-Funktion gesetzt, wie:

$("#testType").change(toggleFields); 

und müssen es nicht als eine anonyme Funktion wickeln.

Dies wäre ein effizienter Ansatz.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <select id="testType"> 
 
    <option value = "" selected disabled>Select mode</option> 
 
    <option value = "online">Online</option> 
 
    <option value = "offline">Offline</option> 
 
    </select> 
 
    <hr/> 
 
    <br/> 
 
    <div id="online" style="display:none;">I am online part</div> 
 
    <br/> 
 
    <div id="offline" style="display:none;">I am offline part</div> 
 
    <br/> 
 

 

 

 
    <script> 
 
    $(document).ready(function() { 
 
     $("#testType").change(toggleFields); 
 
    }); 
 
    function toggleFields() { 
 
     if ($("#testType").val() == "online") 
 
     { 
 
      $("#offline").hide(); 
 
      $("#online").show(); 
 
     } 
 
     else 
 
     { 
 
      $("#online").hide(); 
 
      $("#offline").show(); 
 
     } 
 
    } 
 
    </script>