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

2019-11-20 11:47:11

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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 style="font-size:12px"><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 class="wenbenkuang"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" class="wenbenkuang"></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程序设计有所帮助。

上一篇：遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）

下一篇：jQuery鼠标经过方形图片切换成圆边效果代码分享