分享

用javascript实现不按Ctrl实现Multiple Select多选

 WindySky 2009-06-24
<!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>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多