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


Posted in Javascript onAugust 20, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
javascript json2 使用方法
Mar 16 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 #Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 #Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 #Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 #Javascript
js图片翻书效果代码分享
Aug 20 #Javascript
JS给Textarea文本框添加行号的方法
Aug 20 #Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 #Javascript
You might like
谈谈新手如何学习PHP
2006/12/14 PHP
激活 ActiveX 控件
2006/10/09 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
script标签属性用type还是language
2015/01/21 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
web打印小结
2017/01/11 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
Django 路由控制的实现代码
2018/11/08 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
关于打架的检讨书
2014/01/17 职场文书
迎新晚会邀请函
2014/02/01 职场文书
教育技术职业规划范文
2014/03/04 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python