title: php multi select drop down
body: <p>I have created a multi-select list with PHP. I started out with just a single select drop down. Is there a way to have a multi-select drop down. I would prefer to have the drop down rather than a scrolled list. Here's what I've got so far:</p>
  
  <pre><code>&lt;form action='/MaterialTracking_Filtered.php' enctype='multipart/form-data' method='post'&gt;
    &lt;input type='hidden' name='action' value='SearchTerms' /&gt;
    &lt;table id='SearchTable'&gt;
      &lt;tr&gt;
        &lt;td&gt;
        &lt;label&gt;State&lt;/label&gt; 
        &lt;select name='State[]' multiple='multiple' size='1'&gt;
          &lt;option value='' selected='selected'&gt;All&lt;/option&gt;
          &lt;option value='AL'&gt;AL&lt;/option&gt;
          &lt;option value='AZ'&gt;AZ&lt;/option&gt;
          &lt;option value='CA'&gt;CA&lt;/option&gt;
          &lt;option value='FL'&gt;FL&lt;/option&gt;
        &lt;/select&gt;&lt;/td&gt;
        &lt;td&gt;
        &lt;label&gt;Project&lt;/label&gt; 
        &lt;input type='text' name='Project' size='10' /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;center&gt;
            &lt;input type='submit' name='submit' value='Search' /&gt;
          &lt;/center&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Right now this gives me a scrolled select list, I want a drop list so there is no scrolling.</p>
  
  <p>Here's a fiddle of what I've got: <a href="https://jsfiddle.net/MidlothainAdair/bu6xs0u6/" rel="nofollow noreferrer">selectList</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I have tried the answer from below by @GCRDev and am not able to get it to work for me. In my fiddle it works fine like this:</p>
  
  <p><a href="https://i.stack.imgur.com/UwRUz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UwRUz.jpg" alt="Working"></a></p>
  
  <p>Then I put it into my website and it looks like this instead:</p>
  
  <p><a href="https://i.stack.imgur.com/ExSmm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ExSmm.jpg" alt="notWorking"></a></p>
  
  <p>I copied it exactly from one to the other. I've even updated the fiddle to show the update. I don't know why it's not working except maybe the way the <code>&lt;div&gt;</code> is being displayed?</p>