首页 > 网络编程 > JavaScript > 表单特效 > 用javascript实现不按Ctrl实现Multiple Select多选 2007-08-10 19:00:23 作者： 用javascript实现不按Ctrl实现Multiple Select多选 <!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 全选 注:如需引入外部Js需刷新才能执行]
