在选择表单的页面加载显示选项

Question

我使用下面的这个脚本来显示或隐藏一些<div> 。 脚本中的selected类与display:block和my <div>相关联，并以带有display:none的类开头。

当页面加载时，所有div都被隐藏。 但我想展示第一个，但我能做到这一点？

$(document).ready(function(){
          $("select[name*='material']").change(function(){
              select_changed();
          });
      });

  function select_changed(){
      $("div[id*='mat-']").each(function(){
         $(this).removeClass('selected');
      });
      $("select[name*='material']").each(function(){
          var selected = $(this).val();
          $('#'+selected).addClass('selected');
      });
  }

我已经设置了像第一项一样的选项，但这并没有显示出来。 我认为问题是所有div在开头都有一个display:none类。 我该怎么办

为了更清楚：HTML

  <div class="materiali">
        <select name="material" id="material">
            <option value="mat-1">Material 1</option>
            <option value="mat-2">Material 2</option>
        </select>
     </div>

    <div class="boxx" id="mat-1">
       Materail 1
    </div>
    <div class="boxx" id="mat-2">
       Materail 2
    </div>

CSS

.boxx{
  display: none
}
.selected{
    display: block;
}

Answer 1

既然你已经为select_changed()编写了一个函数，只需在ready函数上调用该函数，执行如下操作：

 $(document).ready(function(){ $("select[name*='material']").change(function(){ select_changed(); }); select_changed() //here you can invoke your function on page ready }); function select_changed(){ $("div[id*='mat-']").each(function(){ $(this).removeClass('selected'); }); $("select[name*='material']").each(function(){ var selected = $(this).val(); $('#'+selected).addClass('selected'); }); } 

 .boxx{ display: none } .selected{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="materiali"> <select name="material" id="material"> <option value="mat-1">Material 1</option> <option value="mat-2">Material 2</option> </select> </div> <div class="boxx" id="mat-1"> Materail 1 </div> <div class="boxx" id="mat-2"> Materail 2 </div> 

Answer 2

 $(document).ready(function(){ function select_changed(){ $("div[id*='mat-']").each(function(){ $(this).removeClass('selected'); }); $("select[name*='material']").each(function(){ var selected = $(this).val(); $('#'+selected).addClass('selected'); }); }; $("select[name*='material']").change(function(){ select_changed(); }); $("select[name*='material']").change(); }); 

 .boxx{ display: none } .selected{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="materiali"> <select name="material" id="material"> <option value="mat-1">Material 1</option> <option value="mat-2">Material 2</option> </select> </div> <div class="boxx" id="mat-1"> Materail 1</div><div class="boxx" id="mat-2">Materail 2</div>