title: On page load show option from select form
body: <p>I use this script below for show or hidden a few <code>&lt;div&gt;</code>.
  The <code>selected</code> class in the script is associated with a <code>display:block</code> and my <code>&lt;div&gt;</code> start with a class with a <code>display:none</code>.</p>
  
  <p>When the page is load all <code>div</code> are hidden. But I will like show the first of this, but I can do this? </p>
  
  <pre><code>$(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');
        });
    }
  </code></pre>
  
  <p>I have already set an option like first items, but this not show up. I think the problem is all <code>div</code> in the begin have a <code>display:none</code> class.
  How I can do.</p>
  
  <p>For let more clear:
  HTML</p>
  
  <pre><code>  &lt;div class="materiali"&gt;
          &lt;select name="material" id="material"&gt;
              &lt;option value="mat-1"&gt;Material 1&lt;/option&gt;
              &lt;option value="mat-2"&gt;Material 2&lt;/option&gt;
          &lt;/select&gt;
       &lt;/div&gt;
  
      &lt;div class="boxx" id="mat-1"&gt;
         Materail 1
      &lt;/div&gt;
      &lt;div class="boxx" id="mat-2"&gt;
         Materail 2
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.boxx{
    display: none
  }
  .selected{
      display: block;
  }
  </code></pre>