这里使用js实现可进行多项选择的下拉列表,鼠标点击上边下拉列表中的任意值,下边列表中就会显示该选中值,按住键盘上的Ctrl键,再次点击上边的列表任意值,可进行多选,多选功能得益于JavaScript的帮忙,在网页上这种应用挺广泛,有必要看一看。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>遍历多选择下拉列表</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> .wenbenkuang { font-family: "宋体"; font-size: 9pt; color: #333333; border: 1px solid #999999; } </style> </head> <body> <form method="post" action=""> <table cellpadding="3" cellspacing="1" bgcolor="#FFCC00"> <tr> <td bgcolor="#FFFFFF">可以进行多项选择的下拉列表:</td> </tr> <tr> <td bgcolor="#FFFFFF"><select size="4" multiple onchange="updateorder()"> <option value="JavaScript程序设计">JavaScript程序设计</option> <option value="JavaScript经典教程">JavaScript经典教程</option> <option value="JavaScript范例宝典">JavaScript范例宝典</option> <option value="JavaScript与CSS样式">JavaScript与CSS样式</option> <option value="JavaScript与HTML">JavaScript与HTML</option> </select></td> </tr> <tr> <td background="images/bg.gif" bgcolor="#FFFFFF">显示所选内容:</td> </tr> <tr> <td bgcolor="#FFFFFF"><textarea cols="40" rows="6"></textarea></td> </tr> </table> </form> <script language="javascript"> function updateorder() { var orderstring=""; var n=document.form1.mcusep.length; for (i=0;i<n;++i) { if (document.form1.mcusep.options[i].selected) { orderstring+=document.form1.mcusep.options[i].value+"\n"; } } document.form1.textarea.value=orderstring; } </script> </body> </html>