php multi select drop down

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?

See http://stackoverflow.com/questions/4753407/jquery-multiselect-drop-down-menu — Katie, Aug 12 '16 at 14:16
i think this url helps you http://semantic-ui.com/modules/dropdown.html — ubm, Aug 12 '16 at 14:18
I think this can even be done with pure HTML and CSS. In any case, your question has nothing to do with PHP. PHP simply handles the data in your backend. In this case, it doesn't affect your frontend code in any way. — icecub, Aug 12 '16 at 14:18

independent.guru · Accepted Answer · 2016-08-12T18:04:42.663

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>

To ensure this only applies to this menu I would need to add `#multi-select` to the begining of each line right? I have other menus setup already and don't want to mess them up. — Mike, Aug 12 '16 at 15:06
That breaks the style of the menu and leaves behind a link. I've found it easier to wrap it in a div class and then change the CSS to only affect the elements within that class. I've posted an edit above with a basic example. — independent.guru, Aug 12 '16 at 15:46
I'm going to try this and let you know. Looks simpler than some of the other suggestions. — Mike, Aug 12 '16 at 15:51
I'm not able to get this to work in my website only in my fiddle? — Mike, Aug 12 '16 at 17:14
You probably have another class using the name content, try changing the word content for something else like searchContent in the div and CSS. — independent.guru, Aug 12 '16 at 18:04

php multi select drop down

1 Answers1