javascript实现多选列表框

这段代码展示了如何使用JavaScript实现多选列表框的操作,包括选择项的删除、移动到另一个列表以及添加功能。通过函数SelMove实现了选择项在源列表和目标列表之间的移动,并通过checkPostType函数检查选项是否重复。此外,还提供了全选功能和提交按钮的点击事件处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 
  1. <script language="javascript">
  2. function MM_findObj(n, d) { //v4.0
  3.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  4.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  5.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  6.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  7.   if(!x && document.getElementById) x=document.getElementById(n); return x;
  8. }
  9. function checkPostType(des,op){
  10.  if(!des || !op) return true;
  11.  var flag = true;
  12.  var ops = des.options;
  13.  var i=0;
  14.  for(i=0;i<ops.length;i++){
  15.   if(ops.item(i).value==op.value) {
  16.    flag=false;
  17.   }
  18.   if(ops.item(i).value%100==0 && ops.item(i).value==op.value-op.value%100){
  19.    flag=false;
  20.   }
  21.   if(!flag){
  22.    alert('选项 ['+ops.item(i).innerText+'] 已经包含了 ['+op.innerText+'].');
  23.    return flag;
  24.   }
  25.   if(op.value%100==0 && op.value==ops.item(i).value-ops.item(i).value%100){
  26.    ops.remove(i);
  27.    i--;
  28.   }
  29.  }
  30.  return flag;
  31. }
  32. //此函数实现列表中所选择项的删除与移到到别外一个列表中的功能.2001/04/04
  33. //参数表:
  34. //src 源列表
  35. //des 目的列表(如果省略则删除源列表中选中的项)
  36. //exce 如果源列表中某一项的文本与此参数相同则该项不能被移走或删除(可省略)
  37. //d1 指定源列表所在的框架或窗口(如省略则在当前框架或窗口中查找)
  38. //d2 指定目的列表所在的框架或窗口(如省略则在当前框架或窗口中查找)
  39. //
  40. function SelMove(src,des,check,exce,d1,d2,del) {  if (!src) return false;
  41.         var oSrc=MM_findObj(src,d1);
  42.         if (!oSrc) return false;
  43.         if (!des) {
  44.                 for (i=0;i<oSrc.options.length;i++) {
  45.                         if (oSrc.options(i).selected){
  46.                                 if (oSrc.options(i).innerText!=exce) {
  47.                                         oSrc.options.remove(i);
  48.                                         i--;
  49.                                 }
  50.                         }
  51.                 }
  52.         }
  53.         else {
  54.                 var oDes=MM_findObj(des,d2);
  55.                 if (!oDes) return false;
  56.                 for (i=0;i<oSrc.options.length;i++) {
  57.                         var oSrcOption =oSrc.options.item(i);
  58.                         if(oSrcOption.selected){
  59.                                 if(check && check(oDes,oSrcOption)){
  60.                                         if(oSrcOption.innerText!=exce) {
  61.                                                 var oOption = document.createElement("OPTION");
  62.                                                 oDes.options.add(oOption);
  63.                                                 oOption.innerText = oSrcOption.innerText;
  64.                                                 oOption.value = oSrcOption.value;
  65.                                                 oSrcOption.selected=false;
  66.                                                 if(del) {oSrc.options.remove(i);i--;}
  67.                                         }
  68.                                 }
  69.                         }
  70.                 }
  71.         }
  72. }
  73. function check_City(des,op){
  74.  if(checkPostType(des,op)){
  75.   if(des.options.length>=3){
  76.    alert("不可以超过三个!");
  77.    return false;
  78.   }
  79.   else return true;
  80.  }
  81.  else {
  82.   return false;
  83.  }
  84. }
  85. function SelSelectedAll(oSrc){
  86.         if(!oSrc) return false;
  87.         var i;
  88.         for(i=0;i<oSrc.options.length;i++){
  89.                 oSrc.options.item(i).selected=true;
  90.         }
  91. }
  92. function check()
  93. {
  94. SelSelectedAll(document.form1.b)
  95. }
  96. </script>
  97. <form id="form1" name="form1" method="post" action="b.asp">
  98.   <select name="a" size="10" multiple="multiple" id="a" style="width: 180px;font-size: 12px;">
  99.   <option value="1">1</option>
  100.     <option value="2">2</option>
  101.     <option value="3">3</option>
  102.     <option value="4">4</option>
  103.     <option value="5">5</option>
  104.         </select>
  105.   <a href="#" onclick="SelMove('a','b',check_City)">添加</a>
  106.   <select name="b" size="10" multiple="multiple" id="b" style="width: 180px;font-size: 12px;">
  107.     
  108.   </select>
  109.   <input type="submit" name="button" id="button" value="提交" onclick="check()" />
  110. </form>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值