繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
表单特效
→ 正文内容
用javascript实现不按Ctrl实现Multiple Select多选
发布：dxy 字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <select id="oselect" name="cars" size="10" multiple> <option value="BMW">宝马</option> <option value="Porsche">保时捷</option> <option value="Benz">奔驰</option> <option value="Santana">桑塔纳</option> <option value="LK">林肯</option> <option value="?">标志</option> <option value="Bus">大公共</option> </select> <input type="button" id="btnShowSelected" value="查看选中项索引"> </body> <script language="JavaScript"> <!-- String.prototype.trimEnd = function(trimString) { var re = new RegExp(trimString+"*$", "g"); return this.replace(re, ""); }; Array.prototype.indexOf = function(itemValue) { var nIndex = -1; for (var i=0; i<this.length; i++) { if (this[i] == itemValue) nIndex = i; } return nIndex; }; var oSpan = document.getElementById("spaOutput"); var oSele = document.getElementById("oSelect"); var oBtn = document.getElementById("btnShowSelected"); oBtn.onclick = function() { alert(getSelectedIndexes(oSele)); }; function getSelectedIndexes(oSele) { var sSelectedIndexes = ""; var separator = ","; for (var i=0; i<oSele.options.length; i++) { if (oSele.options[i].selected) sSelectedIndexes += i.toString() + separator; } if (sSelectedIndexes == "") return new Array(0); else return sSelectedIndexes.trimEnd(separator).split(separator); } oSele.onclick = function() { this.selectedIndexes = getSelectedIndexes(this); // Debug //oSpan.innerHTML += " " + "onclick " + this.selectedIndexes; if (this.selectedIndexes.length == 1) { var nSelectedIndex = parseInt(this.selectedIndexes[0]); if (!isNaN(nSelectedIndex)) this.options[nSelectedIndex].selected = false; } }; oSele.onchange = function() { // Debug //oSpan.innerHTML += " " + "onchange " + this.selectedIndex; var j = this.selectedIndexes.indexOf(this.selectedIndex.toString()); if (j > -1) { this.options[this.selectedIndex].selected = false; this.selectedIndexes.splice(j, 1); } if (this.selectedIndexes.length > 0) { var nSelectedIndex; for (var i=0; i<this.selectedIndexes.length; i++) { nSelectedIndex = parseInt(this.selectedIndexes[i]); this.options[nSelectedIndex].selected = true; } } }; //--> </script> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
用javascript实现不按Ctrl实现Multiple
Select多选
百度中搜索更多的关于
用javascript实现不按Ctrl实现Multiple Select多选
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
比较简单的javascript实现input双击后可以编辑
下一篇文章：
javascript+css好多网站用的选星星实现打分功能的函数
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
Select的OnChange()事件
得到文本框选中的文字，动态插入文字的js
把textarea中字符串里含有的回车换行替换
关于脚本操作文本域的问题
用javascript实现文本框和"选择&quo
二级连动菜单
强效、方便的表单通用检测JS 不错
取得input元素中部分选中(selected)的值
[IE&FireFox兼容]JS对select操作
HTML-CSS群中单选引发的“事件”
最 近 更 新
动态增加/删除文件域
限制文本字节数js代码
对textarea框的代码调试，而且功能上使用
javascript判断单选框或复选框是否选中方
改进版：在select中添加、修改、删除opti
javascript下拉框不被选中大类的区别方法
关于表单的两点交互体验改进技巧
关于文本限制字数的js代码
点此处秒后立即下载
HTML-CSS群中单选引发的“事件”
热 点 排 行
checkbox实现全选的多种方法 不断
收藏的js表单验证控制代码大全
HTML里select的CSS样式的改变
改进版：在select中添加、修改、
二级连动菜单
Select的OnChange()事件
javascript判断单选框或复选框是
JS多级连动菜单
多个iframe自动调整大小的问题
把textarea中字符串里含有的回车
文章评论
共有 位脚本之家网友发表了评论我来说两句