php多选下拉菜单

Question

我用PHP创建了一个多选列表。我开始只有一个选择下拉菜单。有没有办法让多选下拉。我更喜欢下拉而不是滚动列表。这是我到目前为止所得到的：

<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>

现在这给了我一个滚动的选择列表，我想要一个下拉列表，所以没有滚动。

这是我所得到的一个小提琴：selectList

修改

我已经尝试过来自@GCRDev的答案，我无法让它为我工作。在我的小提琴中，它的效果很好：

然后我将它放入我的网站，它看起来像这样：

我把它完全从一个复制到另一个。我甚至更新了小提琴以显示更新。除了显示<div>之外，我不知道为什么它不能正常工作？

Answer 1

您可以使用纯css和html创建悬停或点击菜单并设置其样式，然后您可以将多个选择框放在该菜单中。以下是一个基本示例：

<强>的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>

修改

如果页面上有其他不希望受到影响的元素，您可以将所有内容包装在DIV类中并调整CSS，这样只会影响标记中的元素，如下所示：

<强> 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>