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 相关文章推荐
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
详解JS函数防抖
Jun 05 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
php5 and xml示例
2006/11/22 PHP
php循环输出数据库内容的代码
2008/05/24 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python爬取读者并制作成PDF
2015/03/10 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Python sorted排序方法如何实现
2020/03/31 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
Django中ORM的基本使用教程
2020/12/22 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
公司财务自我评价分享
2013/12/17 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
大四学生个人总结
2015/02/15 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python