左右推拉 javascript

左右推拉 javascript 实现

1. jsp 页面中：

<tr>
          <td colspan="2" class="td_tr1"> 
          
          <select name="receivers" multiple="multiple"  size="10" id="receivers" style="width:300">
          <%
          ContentList list2 = new ContentList();
              Iterator<Content> iter2 = list2.getList(request.getParameter("page"));
           totalNum = list2.getTotalrow();
           
              while (iter2.hasNext())
              {
                  Content db = iter2.next(); 
                  System.out.println(db.getCtid());
          %>
          
          <option value='<%=db.getCtid()%>'><%=db.getTitle()%> </option>
          
          
          <%} %>
          </select>
          </td>
          <td class="td_tr1">
          <input type="hidden" name="cid" value="<%=cid %>">
          
           <input  id=addInd type="button" value="增加&gt;&gt;" name="addInd"  onClick="addChildNodes(receivers,receiver,'ddd');" >
                                <br><br>
                                <input  id=removeInd type="button" value="删除&lt;&lt;" name="removeInd"  onClick="removeChildNodes(receivers,receiver);">
          </td>
          
          <td class="td_tr1">
          
          <select  multiple name="receiver" size="10"  style="width:300px ">
       <%
        
       //String sqlWhere ="where bulletinid="+ dblist.getBulletinid(); //out.println(DDListOut.getReceiverDDList1("receiver",Tools.checkNull(request.getParameter("//receiver")),true,"",sqlWhere));
        %> 
        </select>
          </td>

         
          </tr>

 

2. 提交函数 javascript

  function doAdd()
    {
     getNodes(document.all.receivers,document.all.receiver);
        document.myform.action="addRelation.jsp";
        myform.submit();
        document.all.btnadd.disabled=true;
    }
   
    function getNodes(srcObj,desObj)
 {
  var strNodes="";
  if(desObj.options[0].value == "")
  {
   var desLen=srcObj.length;
  
   for(var i=1;i<desLen;i++)
   { 
    //alert("i="+i);
    var srcOpt=srcObj.options[i].value ;
    strNodes = strNodes +","+ srcOpt ;
    
   }
  
  
  }
  else if(desObj.options[0].value != "")
  {
   var desLen=desObj.length;
 
   for(var i=0;i<desLen;i++)
   { 
    var srcOpt=desObj.options[i].value ;
    strNodes = strNodes +","+ srcOpt ;
    
   }
  }
  alert("strNodes="+strNodes);
  document.all.rece.value=strNodes.substring(1);

 }

 

 

3. 推拉javascript：

  
//添加
function addChildNodes(srcObj,desObj,alertMessage)
{
    //如果已经选择了不限，则不增添加任何项
    var desLen=desObj.length;
 //alert("desLen="+desLen);
   //循环每个选项
    var srcLen=srcObj.length;
 //alert("srcLen="+srcLen);
 
    for(var i=0;i<srcLen;i++)
    {
  
  
        var srcOpt=srcObj.options[i];
        if(srcOpt.selected)
        {
           //如果已经选择了不限，则不添加任何项
    // alert(srcOpt.value);
   if(srcOpt.value=="")
   {
    
    clearListObj(desObj,srcObj);
    //removeChildNodes(srcObj,desObj)
    
    desObj.options.add(new Option(srcOpt.text,srcOpt.value));
    //srcObj.options.remove(i);
    return;
   }
            //如果已经选择了该项，则不再添加
            var desLen=desObj.length;
            var isContinue=false;
            for(var j=0;j<desLen;j++)
            {
    
            
                //选择其他后,删除已经选择的“不限”选项
                if(desObj.options[j].value=="")
    {
     desObj.remove(j);

     //isContinue=true;
                   // continue;
     //srcObj.options.add(new Option(desObj.options[j].text,desObj.options[j].value));
     //desObj.options.add(new Option(srcOpt.text,srcOpt.value));
     //srcObj.options.remove(i);
    }
            }
            //if(isContinue==true) continue; 
  
            desObj.options.add(new Option(srcOpt.text,srcOpt.value));
   srcObj.options.remove(i);
   break;

   
           
         }
    }
}

//判断是否超过限定项数(默认为5项)
function IsSelectFlow(srcObj,selectObj)
{
    var selectLen=selectObj.length;
    if(selectLen>=5 && srcObj.value!=NOTLIMITID)
    {
        return true;                   
    }       
    return false;
}

//移除
function removeChildNodes(srcObj,desObj)
{
    var len=desObj.length;
    for(var i=len-1;i>=0;i--)
    {       
        if(desObj.options[i].selected)
        {
   
   if(desObj.options[i].value=="")
   {
    //srcObj.options.add(new Option(desObj.options[i].text,desObj.options[i].value));
    desObj.remove(i);
   }
   else
   {
    srcObj.options.add(new Option(desObj.options[i].text,desObj.options[i].value));
    desObj.remove(i);
   }
        }

  
    }
}

//清除obj
function clearListObj(obj,obj1)
{
    var len=obj.length;
    for(var i=0;i<len;i++)
 {
  
  obj1.options.add(new Option(obj.options[0].text,obj.options[0].value));
  obj.remove(0);

 }

}

//初始化ExpectTrade
function initExpectTradeNodes(srcObj,desObj,idstr)
{     
    clearListObj(srcObj);   
    var len=__ExpectTradeIds.length;   
    for(var i=0;i<len;i++)
    {    
        srcObj.options.add(new Option(__ExpectTradeNames[i],__ExpectTradeIds[i]));
    }       
   
    var ids=idstr.split(',');
    for(var i=0;i<ids.length;i++)
   {
      var isFind=false;
      for(var j=0;j<len;j++)
      {
          if(ids[i]==srcObj.options[j].value)
          {
              desObj.options.add(new Option(__ExpectTradeNames[j],__ExpectTradeIds[j]));
              isFind=true;
              break;
          }
      }     
  }
}

//全选
function selectAll(obj)
{
    var len=obj.length;
    for(var i=0;i<len;i++)
    {
        obj.options[i].selected=true;
    }
}