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

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()编写了一个函数，所以只需在就绪函数上调用该函数，如下所示：

​

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

​