显示功能不与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>