title: Code optimization for <select> tag and it's child tags
body: <p>I need some code optimization regarding to my <code>&lt;select&gt;</code> tag.</p>
  
  <p>I uses <code>&lt;optgroup&gt;</code> tag for categories and <code>&lt;option&gt;</code> for it's fields.</p>
  
  <p>I have a 24 <code>&lt;optgroup&gt;</code> and 4-16 <code>&lt;options&gt;</code> per <code>&lt;optgroup&gt;</code> and 24 additional <code>&lt;optgroup&gt;</code> for the separator(to make it more readable).</p>
  
  <p>And it looks like this:</p>
  
  <pre><code>&lt;select class="" name=""&gt;
     &lt;optgroup class="" style="display: none; visibility: hidden;" label=""&gt;
        &lt;option class="" value=""&gt;This is the default selected value&lt;/option&gt;
     &lt;/optgroup&gt;
     &lt;optgroup class="" label="Categories"&gt; // up to 24 Categories
        &lt;option class="" value=""&gt;Fields&lt;/option&gt; // up to 16 Fields per Category
     &lt;/optgroup&gt;
     &lt;optgroup class="" label="_______________________&amp;nbsp;"&gt;&lt;/optgroup&gt; // separator
  &lt;/select&gt;
  </code></pre>
  
  <p>And the results are:</p>
  
  <ul>
  <li>File size is 31KB</li>
  <li>I will paste this in every page that needs this dropdown.</li>
  </ul>
  
  <p>Question:</p>
  
  <ol>
  <li>In what ways can I optimize this? Can you give me an example so that I will try it on my <code>localhost</code>.</li>
  </ol>
  
  <p>Tried Solution:</p>
  
  <ul>
  <li>I tried to make a function for this and through <code>array()</code> problem is that when I use <code>xdebug</code> the <code>Self</code> is 40+, so I it will slow the response time in the production.</li>
  </ul>
  
  <p>Additional Question for the answer recommended by <code>Prashanth Benny</code> which is to use <code>include_once</code> / <code>require_once</code>:</p>
  
  <ul>
  <li>How can I use the <code>selected</code> attribute dynamically? Ex. in URL or from Database comparison. How can I make it use the <code>selected</code> / <code>selected="selected"</code>?</li>
  </ul>