入れ子になったdivでdivを非表示にする方法

Question

私はJavascript（とJQuery）とWeb Development自体が新ですので、divの内容全体を表示しようとしていますservice_info（隠されています）私の<select>のIDはservice_typeです。

headタグで宣言されたmaterialize.cssとMDLを使用したコードは次のとおりです。 jQuery 2.2.1は、headタグの中で、MDLとマテリアライズのスクリプトの前に宣言されています。

$('#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>

何が起こるように思わない理由を私は理解できません。

Answer 1

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