Wie man ein Div mit verschachtelten div verbergen

Question

Ich bin neu in Javascript (und JQuery) und Web Development selbst, so habe ich Probleme, den gesamten Inhalt des div service_info (das ist ausgeblendet) zu zeigen, wenn ich einen auswähle die option in meinem <select> mit id service_type.

Hier ist der Code, mit materialize.css und MDL beide im head Tag deklariert. jQuery 2.2.1 wird im Tag head vor den Skripten von MDL deklariert und materialisiert.

$('#service_type').change(function() { 
 
    $('#service_info').show('slide'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="input-field col s12"> 
 
    <select id="service_type" name="service_type"> 
 
     <option disabled selected value=""> 
 
      Scegli un tipo di servizio 
 
     </option> 
 
     <option value="discharge"> 
 
      Dimissioni 
 
     </option> 
 
     <option value="transfer"> 
 
      Trasfermimento struttura 
 
     </option> 
 
     <option value="examination"> 
 
      Visita di controllo 
 
     </option> 
 
     <option value="admission"> 
 
      Ricovero in casa di cura o clinica 
 
     </option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="col s12" id="service_info" hidden> 
 
    <div class="row"> 
 
    <div class="input-field col s4"> 
 
     <input class="mdl-textfield__input" id="place_from" name="place_from" type="text"> 
 
     <label for="place_from">Indirizzo del luogo di partenza</label> 
 
    </div> 
 
    <div class="input-field col s4"> 
 
     <input class="validate" id="place_to" name="place_to" type="text"> 
 
     <label for="place_to">Indirizzo del luogo di arrivo</label> 
 
    </div> 
 
    <div class="input-field col s4"> 
 
     <input class="validate" id="section" name="section" type="text"> 
 
     <label for="section">Reparto</label> 
 
    </div> 
 
    </div> 
 
</div>

Ich kann nicht verstehen, warum nichts zu geschehen scheint.

Answer 1

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#service_type').change(function() { 
       $('#service_info').show('slide'); 
      }); 
     });  
</script>