php多选下拉菜单

Question

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:

<form action='/MaterialTracking_Filtered.php' enctype='multipart/form-data' method='post'>
  <input type='hidden' name='action' value='SearchTerms' />
  <table id='SearchTable'>
    <tr>
      <td>
      <label>State</label> 
      <select name='State[]' multiple='multiple' size='1'>
        <option value='' selected='selected'>All</option>
        <option value='AL'>AL</option>
        <option value='AZ'>AZ</option>
        <option value='CA'>CA</option>
        <option value='FL'>FL</option>
      </select></td>
      <td>
      <label>Project</label> 
      <input type='text' name='Project' size='10' /></td>
    </tr>
    <tr>
      <td>
        <center>
          <input type='submit' name='submit' value='Search' />
        </center>
      </td>
      <td></td>
    </tr>
  </table>
</form>

Right now this gives me a scrolled select list, I want a drop list so there is no scrolling.

Here's a fiddle of what I've got: selectList

EDIT

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:

Then I put it into my website and it looks like this instead:

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 <div> is being displayed?

Answer 1

You could use pure css and html to create and style a hover or click menu, then you could place the multiple select box inside that menu. The following is a basic example:

css:

<style>
 .select{width:100;}
  #multi-select li ul li {border-top:0;}
  ul {list-style:none; padding:0; margin:0;}
  ul li {display:block; position:relative; float:left; border:1px solid #000}
  li ul {display:none;}
  ul li a {display:block;background:#fff; padding:5 10 5 10; text-decoration:none; color:#000;}
  ul li a:hover {background:#fff;}
  li:hover ul {display:block; position:absolute;}
  li:hover li {float:none;}
  li:hover a {background:#fff;}
  li:hover li a:hover {background:#000;}
</style>

html:

<ul id="multi-select">
  <li><a href="#">Select State</a>
    <ul>
      <select class="select" name='State[]' multiple>
        <option value='' selected='selected'>All</option>
        <option value='AL'>AL</option>
        <option value='AZ'>AZ</option>
        <option value='CA'>CA</option>
        <option value='FL'>FL</option>
      </select>
    </ul>
  </li>
</ul>

EDIT

If you have other elements on the page that you don't want to be affected, you could wrap everything up in a DIV class and tweak the CSS so only the elements within the tag will be affected, like so:

CSS

<style>
 #multi-select li ul li {border-top:0;}
 .select{width:100;}
 .content ul {list-style:none; padding:0; margin:0;}
 .content ul li {display:block; position:relative; float:left; border:1px solid #000}
 .content li ul {display:none;}
 .content ul li a {display:block;background:#fff; padding:5 10 5 10; text-decoration:none; color:#000;}
 .content ul li a:hover {background:#fff;}
 .content li:hover ul {display:block; position:absolute;}
 .content li:hover li {float:none;}
 .content li:hover a {background:#fff;}
 .content li:hover li a:hover {background:#000;}
</style>

html

<div class="content">
<ul id="multi-select">
  <li><a href="#">Select State</a>
<ul>
  <select class="select" name='State[]' multiple>
    <option value='' selected='selected'>All</option>
    <option value='AL'>AL</option>
    <option value='AZ'>AZ</option>
    <option value='CA'>CA</option>
    <option value='FL'>FL</option>
  </select>
</ul>
</li>
</ul>
</div>