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>