例子,js 多选列表框功能代码。
如下:
<script language="javascript">
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function checkPostType(des,op){
if(!des || !op) return true;
var flag = true;
var ops = des.options;
var i=0;
for(i=0;i<ops.length;i++){
if(ops.item(i).value==op.value) {
flag=false;
}
if(ops.item(i).value%100==0 && ops.item(i).value==op.value-op.value%100){
flag=false;
}
if(!flag){
alert('选项 ['+ops.item(i).innerText+'] 已经包含了 ['+op.innerText+'].');
return flag;
}
if(op.value%100==0 && op.value==ops.item(i).value-ops.item(i).value%100){
ops.remove(i);
i--;
}
}
return flag;
}
//此函数实现列表中所选择项的删除与移到到别外一个列表中的功能.2001/04/04
//参数表:
//src 源列表
//des 目的列表(如果省略则删除源列表中选中的项)
//exce 如果源列表中某一项的文本与此参数相同则该项不能被移走或删除(可省略)
//d1 指定源列表所在的框架或窗口(如省略则在当前框架或窗口中查找)
//d2 指定目的列表所在的框架或窗口(如省略则在当前框架或窗口中查找)
//
function SelMove(src,des,check,exce,d1,d2,del) { if (!src) return false;
var oSrc=MM_findObj(src,d1);
if (!oSrc) return false;
if (!des) {
for (i=0;i<oSrc.options.length;i++) {
if (oSrc.options(i).selected){
if (oSrc.options(i).innerText!=exce) {
oSrc.options.remove(i);
i--;
}
}
}
}
else {
var oDes=MM_findObj(des,d2);
if (!oDes) return false;
for (i=0;i<oSrc.options.length;i++) {
var oSrcOption =oSrc.options.item(i);
if(oSrcOption.selected){
if(check && check(oDes,oSrcOption)){
if(oSrcOption.innerText!=exce) {
var oOption = document.createElement("OPTION");
oDes.options.add(oOption);
oOption.innerText = oSrcOption.innerText;
oOption.value = oSrcOption.value;
oSrcOption.selected=false;
if(del) {oSrc.options.remove(i);i--;}
}
}
}
}
}
}
function check_City(des,op){
if(checkPostType(des,op)){
if(des.options.length>=3){
alert("不可以超过三个!");
return false;
}
else return true;
}
else {
return false;
}
}
function SelSelectedAll(oSrc){
if(!oSrc) return false;
var i;
for(i=0;i<oSrc.options.length;i++){
oSrc.options.item(i).selected=true;
}
}
function check()
{
SelSelectedAll(document.form1.b)
}
</script>
<form id="form1" name="form1" method="post" action="b.asp">
<select name="a" size="10" multiple="multiple" id="a" style="width: 180px;font-size: 12px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<a href="#" onclick="SelMove('a','b',check_City)">添加</a>
<select name="b" size="10" multiple="multiple" id="b" style="width: 180px;font-size: 12px;">
</select>
<input type="submit" name="button" id="button" value="提交" onclick="check()" />
</form>