顯示功能不與Materialise和jQuery一起工作

Question

我有兩個選擇，第二個隱藏，如果第一個選擇已被更改，它應該顯示，我通過on('change', function(){ ...檢查它，它工作到目前爲止。我已經檢查並且在第一個選擇框被更改時也顯示console.log。

這裏的問題是，當我更改第一個選擇框的值時，console.log顯示值，但秒選擇框未顯示。

我已經更新MaterializeCSS和jQuery的，這是我的腳本：

<script> 
    $(document).ready(function() { 
     $('select').material_select(); 
     $('#school-list').on('change', function() { 
      $('#section-list').show(); 
      console.log(this.value); 
     }); 
    }); 
</script> 

這是我的選擇：

  <div class="row margin"> 
       <div class="input-field col s12"> 
       <select id="school-list" name="school-list"> 
        <option value="" disabled selected>Choose your school</option> 
        ... 
       </select> 
       <label>School</label> 
       </div> 
      </div> 
      <div class="row margin" style="display: none"> 
       <div class="input-field col s12"> 
       <select id="section-list" name="section-list"> 
        <option value="" disabled selected>Choose your section</option> 
        ... 
       </select> 
       <label>Section</label> 
       </div> 
      </div> 

Answer 1

您需要出示第二選擇的父行。

你可以試試這個代碼：

<script> 
    $(document).ready(function() { 
     $('select').material_select(); 
     $('#school-list').on('change', function() { 
      $('#section-list').parents(".row:eq(0)").show(); 
      console.log(this.value); 
     }); 
    }); 
</script>