JS实现支持多选的遍历下拉列表代码_Javascript教程-查字典教程网

摘要：本文实例讲述了JS实现支持多选的遍历下拉列表。分享给大家供大家参考。具体如下：这里使用js实现可进行多项选择的下拉列表，鼠标点击上边下拉列表...

本文实例讲述了JS实现支持多选的遍历下拉列表。分享给大家供大家参考。具体如下：

这里使用js实现可进行多项选择的下拉列表，鼠标点击上边下拉列表中的任意值，下边列表中就会显示该选中值，按住键盘上的Ctrl键，再次点击上边的列表任意值，可进行多选，多选功能得益于JavaScript的帮忙，在网页上这种应用挺广泛，有必要看一看。

运行效果截图如下：

JS实现支持多选的遍历下拉列表代码1

在线演示地址如下：

http://demo.jb51.net/js/2015/js-select-option-cha-codes/

具体代码如下：

<!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 name="form1" method="post" action=""> <table width="300" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#FFCC00"> <tr> <td height="22" align="left" bgcolor="#FFFFFF">可以进行多项选择的下拉列表:</td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><select name="mcusep" 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 height="22" align="left" background="images/bg.gif" bgcolor="#FFFFFF">显示所选内容:</td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><textarea name="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>

希望本文所述对大家的javascript程序设计有所帮助。