js 多选列表框功能代码

发布时间:2019-12-10编辑:脚本学堂
分享一例js实现的多选列表框的代码,用来实现多选列表框的添加与删除功能,效果不错,有需要的朋友参考下。

例子,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>