javascript - 在页面加载时显示来自选择表单的选项

Question

我在下面使用这个脚本来显示或隐藏一些 <div> . selected脚本中的类与 display:block 相关联和我的 <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类(class)。 我该怎么做。

为了更清楚: 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() 编写了一个函数，只需在就绪函数上调用该函数，请执行以下操作:

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