于ＪＳＰ两个多选列表，动态将左边的选项移到右边或从右移到左边

如果我用动态去实现呢，如何去实现呢？就是说当我选择一种类型，如水果，就会出现很多水果的名，然后我全选传到另一个信息框里，但我现在又想加入工具类的物品．然后选工具类，把全部工具也加入那个信息框里．如何实现呢？

解决方案 »

  1.   

    <script>
    function addItem(source,target){
      for(var x=0;x<source.length;x++){
    var opt = source.options[x];
    if (opt.selected){
      for (var y=0;y<target.length;y++){
    var myopt = target.options[y];
      }
    target.options[target.options.length] = new Option(opt.text, opt.value, 0, 0);
    }
      }
    }
        function delItem(source,target){
      for(var x=target.length-1;x>=0;x--){
    var opt = target.options[x];
    if (opt.selected){
      target.options[x] = null;
    }
      }
    }
    </script>
    <BODY>
    <table><tr> <td height="66" bgcolor="#FFFFFF"> <div align="right"> 　　　 
    <select name="locs" size="5" multiple style="width:15em" ondblclick="addItem(document.all.locs,document.all.mylocs)">
    <option>1sdf</option>
    <option>2asdf</option>
    <option>3hsdf</option>
    <option>4tet</option>
    <option>5ah</option>
    </select>
    </div></td>
    <td bgcolor="#FFFFFF"><p align="center">
    <input name="Submit3" type="button"  value="添加 >>" onClick="addItem(document.all.locs,document.all.mylocs)">
    </p>
    <p align="center">
    <input name="Submit4" type="button"  value="<< 删除" onClick="delItem(document.all.locs,document.all.mylocs)">
    </p></td>
    <td height="66" bgcolor="#FFFFFF"> <div align="left"> 
    <select name="mylocs" size="5" multiple  style="width:15em" ondblClick="delItem(document.all.locs,document.all.mylocs)">
    </select>
    </div></td></tr></table>
      

  2.   

    在JS教本里用JSP链接数据库，把值传入
      

  3.   

    hui_feng(盘桃2) 也是这样说的．但不行啊．
    代码如下．不知道那里传错了．．
      

  4.   

    <tr class="trbg_odd">
                  <td valign="top">支持的手机类型：<br>
                  厂商：<select name="mobile<%=i%>" onChange="getChild<%=i%>(this)"></select></td>
                  <td>
      型号：<select name="mobileType<%=i%>" size="10" multiple ondblClick="addText(document.all.mobileType<%=i%>,document.all.allType<%=i%>)">
      </select>
      <input type="button" name="add<%=i%>" value="添 加" onClick="addText(document.all.mobileType<%=i%>,document.all.allType<%=i%>)">   
      </td>
      <td>
      <input type="hidden" name="sjtype<%=i%>" value="">
      支持的手机型号：<br><select name="allType<%=i%>" size="10" multiple ondblClick="delText(document.all.mobileType<%=i%>,document.all.allType<%=i%>)">
      </select>
      <input type="button" name="del<%=i%>" value="删 除" onClick="delText(document.all.mobileType<%=i%>,document.all.allType<%=i%>)" >   
      </td> 
                </tr>
    <script language="javascript">
    for(var i=0;i<mobile.length;i++)
    {
    var oOption = document.createElement("OPTION");
    oOption.text=mobile[i];
    oOption.value="";
    eval("addform.mobile<%=i%>.add(oOption)");
    }
    function getChild<%=i%>(obj)
    {
    var gk = obj.selectedIndex;
    var name = obj[gk].text;
    var nowMobileType = mobileType[gk];
    var nowIndex = addform.mobileType<%=i%>.length;
    if(nowIndex>0)
    {
    for(var i=nowIndex-1;i>=0;i--)
    {
    var oOption = document.createElement("OPTION");
    oOption.text=name+"-"+addform.mobileType<%=i%>[i];
    oOption.value="";
    addform.mobileType<%=i%>.remove(oOption);
    }
    }
    for(var i=0;i<nowMobileType.length;i++)
    {
    var oOption = document.createElement("OPTION");
    var text = nowMobileType[i].substring(0,nowMobileType[i].indexOf("|"));
    //var val = nowMobileType[i].substring(nowMobileType[i].indexOf("|")+1,nowMobileType[i].length);
    var val = nowMobileType[i].substring(0,nowMobileType[i].indexOf("|"));
    oOption.text=text;
    oOption.value=val;
    addform.mobileType<%=i%>.add(oOption);
    }
    }
    setTimeout("getChild<%=i%>(addform.mobile<%=i%>)",1000);
    function addText(mobiletype<%=i%>,allType<%=i%>){
          var opt = document.createElement("OPTION");
      var text=document.all("mobileType<%=i%>").options[document.all("mobileType<%=i%>").selectedIndex].value
      opt.text=text;
      opt.value=text;
      for(var i=0;i<mobiletype<%=i%>.length;i++){
    opt = mobiletype<%=i%>.options[i];
    if (opt.selected){
      for (var j=0;j<allType<%=i%>.length;j++){
    var myopt = allType<%=i%>.options[j];
      }
    allType<%=i%>.options[allType<%=i%>.options.length] = new Option(opt.text, opt.value, 0, 0);
    }
      }
    }
        function delText(nowMobileType<%=i%>,allType<%=i%>){
      for(var j=allType<%=i%>.length-1;j>=0;j--){
    var opt = allType<%=i%>.options[j];
    if (opt.selected){
      allType<%=i%>.options[j] = null;
    }
      }
    }
    </script>
                <%}%>
                <tr class="tbhead">
                  <td colspan="3" align="center">
                    <input class="bginput"  type="submit" name="submit" value="确定">&nbsp;&nbsp;
                    <input class="bginput"  type="reset" name="reset" value="重置">
                  </td>
              </form>
      

  5.   


    <%
    DefaultSet ds = new DefaultSet();
    togb2312 to = new togb2312();
    %>
    <%
    if(request.getParameter("ok")==null)
    {
        String urName="";
    Calendar  calendar = Calendar.getInstance();
    int now_year = calendar.get(Calendar.YEAR);
    //月份一定要加一
    int now_month = calendar.get(Calendar.MONTH)+1;
    String N_month = now_month < 10 ? "0" + now_month : now_month + "";
    int now_day = calendar.get(Calendar.DATE);
    String N_day = now_day < 10 ? "0" + now_day : now_day + "";
    int now_hour = calendar.get(Calendar.HOUR_OF_DAY);
    int now_min = calendar.get(Calendar.MINUTE);
    int now_sec = calendar.get(Calendar.SECOND);
    urName = now_year+N_month+N_day+now_hour+now_min+now_sec;
    com.jspsmart.upload.SmartUpload mySmartUpload=new com.jspsmart.upload.SmartUpload();
    mySmartUpload.initialize(pageContext); 
    //初始化
    //设置上载的最大值
    mySmartUpload.setMaxFileSize(500 * 1024*1024);
    //上载文件
    mySmartUpload.upload();
    int imgNum = mySmartUpload.getFiles().getCount();
    String size[] = mySmartUpload.getRequest().getParameterValues("size");//图片数
    String jadurl[] = mySmartUpload.getRequest().getParameterValues("jadurl");//jadurl数
    String jarurl[] = mySmartUpload.getRequest().getParameterValues("jarurl");//jarurl数
    String mobiletype=mySmarUpload.getRequest().getParameter("alltype");
    String gamename= mySmartUpload.getRequest().getParameter("gamename");//游戏名称
    String star=mySmartUpload.getRequest().getParameter("star");
    String provider=mySmartUpload.getRequest().getParameter("provider");
    String version=mySmartUpload.getRequest().getParameter("version");//游戏版本数量
    String picnum=mySmartUpload.getRequest().getParameter("picnum");//游戏图片的数量(包括了游戏图片在内)
    String author=mySmartUpload.getRequest().getParameter("author");
    String mode=mySmartUpload.getRequest().getParameter("mode");
    String rule=mySmartUpload.getRequest().getParameter("rule");
    String price="0";
    if(mySmartUpload.getRequest().getParameter("price")!=null)
        price=mySmartUpload.getRequest().getParameter("price");
    String isgood=mySmartUpload.getRequest().getParameter("isgood");
    String orderid = (String)mySmartUpload.getRequest().getParameter("orderid");//虚拟下载量
    String comment = (String)mySmartUpload.getRequest().getParameter("comment");
    String fatherid = "";
    if((String)mySmartUpload.getRequest().getParameter("fatherid")!=null)
    fatherid = (String)mySmartUpload.getRequest().getParameter("fatherid");
    String childid = "";
    if(fatherid.indexOf("^^^")>-1)
    {
    childid = fatherid.substring(fatherid.indexOf("^^^")+3,fatherid.length());
    fatherid = fatherid.substring(0,fatherid.indexOf("^^^"));
    }
    String FileSizes="";
    String[] filesize=new String[jadurl.length];
    String JadExts="";
    String[] ext=new String[(jadurl.length+jarurl.length)];
    String TpExts="";
    String[] tpext=new String[size.length];
      for (int i=0;i<imgNum;i++)
      {
       com.jspsmart.upload.File myFile = mySmartUpload.getFiles().getFile(i);
       if (!myFile.isMissing())
    {
    String myFileName=myFile.getFileName();
    //取得不带后缀的文件名
    //String  suffix=myFileName.substring(0,myFileName.lastIndexOf('.'));
    //取得后缀名 
    //取得文件的大小  
    //int fileSize=myFile.getSize();
    //保存路径
    String trace="";
    if(i<1)
    {
    String ext1= mySmartUpload.getFiles().getFile(i).getFileExt().toLowerCase();
    trace=ds.get("Wset")+"/upfile/img/small/"+urName+"."+ext1; //图片保存的路径
    }
    else if(i<=size.length)
    {
    tpext[i-1]= mySmartUpload.getFiles().getFile(i).getFileExt().toLowerCase();
      TpExts=TpExts+urName+"."+tpext[i-1]+"^^^";
      trace=ds.get("Wset")+"/upfile/img/"+size[i-1]+"/"+urName+"."+tpext[i-1]; //图片保存的路径
      }
    else
    {
    ext[i-size.length-1]=mySmartUpload.getFiles().getFile(i).getFileExt().toLowerCase();
    if(ext[i-size.length-1].equals("jad"))
       {
    String path=ds.get("Wset")+"/upfile/game/"+jadurl[(i-size.length+1)/2-1]+"/";
    java.io.File f = new java.io.File(path+urName);
    if(!f.isDirectory())
    f.mkdir();
    trace=ds.get("Wset")+"/upfile/game/"+jadurl[(i-size.length+1)/2-1]+"/"+urName+"/"+myFileName;//游戏jar、jad保存的路径
    JadExts=JadExts+"/"+urName+"/"+myFileName+"^^^";
       }
      if(ext[i-size.length-1].equals("jar"))
       {
    trace=ds.get("Wset")+"/upfile/game/"+jarurl[(i-size.length+1)/2-1]+"/"+urName+"/"+myFileName;//游戏jar、jad保存的路径
    filesize[(i-size.length+1)/2-1]=String.valueOf(myFile.getSize());
      FileSizes=FileSizes+filesize[(i-size.length+1)/2-1]+"^^^";
    }
      }
    //将文件保存在服务器端 
    myFile.saveAs(trace,mySmartUpload.SAVE_PHYSICAL);
    //将文件读到流中 
    }
     }
    %>
    <form name="myform" action=upgame.jsp method=post>
    <input type="hidden" value="0" name="ok">
    <input type="hidden" value="<%=gamename%>" name="gamename">
    <input type="hidden" value="<%=star%>" name="star">
    <input type="hidden" value="<%=provider%>" name="provider">
    <input type="hidden" value="<%=version%>" name="version">
    <input type="hidden" value="<%=author%>" name="author">
    <input type="hidden" value="<%=mode%>" name="mode">
    <input type="hidden" value="<%=isgood%>" name="isgood">
    <input type="hidden" value="<%=orderid%>" name="orderid">
    <input type="hidden" value="<%=comment%>" name="comment">
    <input type="hidden" value="<%=fatherid%>" name="fatherid">
    <input type="hidden" value="<%=childid%>" name="childid">
    <input type="hidden" value="<%=mobiletype%>" name="mobiletype">
    <input type="hidden" value="<%=FileSizes%>" name="FileSizes">
    <input type="hidden" value="<%=TpExts%>" name="TpExts">
    <input type="hidden" value="<%=JadExts%>" name="JadExts">
    <input type="hidden" value="<%=picnum%>" name="picnum">
    <input type="hidden" value="<%=urName%>" name="urName">
    <input type="hidden" value="<%=price%>" name="price">
    <input type="hidden" value="<%=rule%>" name="rule">
    <input type="submit" value="如见此按钮请手工导航" name="ok">
    </form>
    <script>myform.submit();</script>
    <%}else{%>
    <%
    String urName = request.getParameter("urName");
    String TpExts = request.getParameter("TpExts");
    String picnum = request.getParameter("picnum");
    String JadExts = request.getParameter("JadExts");
    String FileSizes = request.getParameter("FileSizes");
    String mobiletype = request.getParameter("mobiletype");
    String childid = request.getParameter("childid");
    String fatherid = request.getParameter("fatherid");
    String comment = request.getParameter("comment");
    String orderid = request.getParameter("orderid");
    String isgood = request.getParameter("isgood");
    String mode = request.getParameter("mode");
    String author = request.getParameter("author");
    String provider = request.getParameter("provider");
    String star = request.getParameter("star");
    String gamename = request.getParameter("gamename");
    String version = request.getParameter("version");
    String rule = request.getParameter("rule");
    String price = request.getParameter("price");
    connAdmin.addGame(gamename,TpExts,JadExts,picnum,FileSizes,mobiletype,childid,fatherid,comment,orderid,isgood,mode,author,provider,star,price,version,rule);
    %>
    <meta http-equiv="refresh" content="3;URL=addimg.jsp">
    <%}%>
      

  6.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>请选择...</title>
    <link href="../../css/styles.css" rel="stylesheet" type="text/css">
    </head>
    <script language=javascript>
    function insert()
    {
        for (i=0; i<sjrform.source.options.length; i++)
    {
                            if (sjrform.source.options[i].selected){
                            var sjrmc_now=new Array();            
    var name2 = sjrform.source.options[i].text;
                            var ID2 = sjrform.source.options[i].value;
    var len_sjrmc=sjrform.sjrmc.options.length;
            for (j=len_sjrmc-1; j>=0; j--)
                {
    if(sjrform.sjrmc.options[j].value==ID2)
       {
    sjrmc_now[j]=true;
    break;
       }
        } 
    if(!sjrmc_now[j])
       {
    sjrform.sjrmc.options[sjrform.sjrmc.options.length]=new Option (name2,ID2);
       }
     }
                           }
    }
    function del()
    {
    if(sjrform.sjrmc.selectedIndex!=-1)
              {
               sjrform.sjrmc.options[sjrform.sjrmc.selectedIndex] = null;
               }
    else       
               {
       alert("请选择要删除的项！");
       }
    }
    function insert_all()
    {
        for (i=0; i<sjrform.source.options.length; i++)
    {
                            var sjrmc_now=new Array();            
    var name2 = sjrform.source.options[i].text;
                            var ID2 = sjrform.source.options[i].value;
    var len_sjrmc=sjrform.sjrmc.options.length;
            for (j=len_sjrmc-1; j>=0; j--)
                {
    if(sjrform.sjrmc.options[j].value==ID2)
       {
    sjrmc_now[j]=true;
    break;
       }
        } 
    if(!sjrmc_now[j])
       {
    sjrform.sjrmc.options[sjrform.sjrmc.options.length]=new Option (name2,ID2);
       }
    }
    }
    function del_all()
    {
    var len_sjrmc=sjrform.sjrmc.options.length;
    for (i=len_sjrmc-1; i>=0; i--)
              {
               sjrform.sjrmc.options[i] = null;
               }
    }
    function ClickOk()
    {
    var sjrtext="";
            var sjrbmh ="";
    for (i=0; i<sjrform.sjrmc.options.length; i++)
    {
      var ID  = sjrform.sjrmc.options[i].text;
              var ID2 = sjrform.sjrmc.options[i].value;
      sjrtext+=ID +";";
      sjrbmh +=ID2+";";
    }
    window.returnValue = sjrtext+"|"+sjrbmh;
    window.close();
    }
    function ClickCancel()
    {
        window.returnValue="";
        window.close();
    }
    var Name=new Array();
    var Value=new Array();
    Name[0]=new Array("请选择...");Value[0]=new Array("");
    <!-- BEGIN list1 -->
    {name_view}//输入水果工具下面的东西
    {value_view}
    <!-- END list1 -->
    function changeEx()
    {
      for(i=document.all("source").options.length;i>0;i--)
         {
           document.all("source").options.remove(i-1);
         }if(sjrform.bmz.selectedIndex==0){
    document.all("source").options.add(new Option("请选择",""));
    return;}selIndex=document.all("bmz").selectedIndex;
    for(i=0;i<Name[selIndex].length;i++)
       {
         document.all("source").options.add(new Option(Name[selIndex][i],Value[selIndex][i]));
       }
    }
    </script>
    <body bgcolor="#F6F6F6" leftmargin="0" topmargin="0">
    <table width="380" border="0" cellspacing="1" bgcolor="#CCCCCC">
    <form method="POST" name="sjrform" action="" style="Margin:0">
      <tr bgcolor="#E9F0F6">
          <td>请选择或者自编辑参评对象...</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF"><table border="0" width="100%">
        <tr> 
          <td width="100%"><select size="1" name="bmz"  class=f1 style="width: 126;" onChange="changeEx();">
              <option value="">请选择...</option>
      <!-- //在这里输入水果工具-->
      
              <option value="{shuiguo}">{shui}</option>
      <!-- END zlist -->
            </select></td>
          <td width="100%">　</td>
                <td width="100%">选中...</td>
        </tr>
        <tr> 
          <td width="100%"> 
        <select size="7" name="source" multiple  style="width: 126; height: 168">
            </select>
                </td>
          <td width="100%" valign="top" align=center><input name="button" type="button" onClick="insert()" value="添加>>"> 
            <p> 
              <input name="button2" type="button" onClick="insert_all()" value="全部添加">
            </p>
            <p> 
              <input name="button3" type="button" onClick="del()" value="<<删除">
            </p>
            <p> 
              <input name="button4" type="button" onClick="del_all()" value="全部删除">
            </p>
    </td>
          <td width="100%"><select size="7" name="sjrmc" multiple  style="width: 126; height: 168"  class=f1>
            </select></td>
        </tr>
      </table></td>
      </tr>
      <tr bgcolor="#E9F0F6">
          <td align="right">
    <input type="button" value="确　定" onclick="ClickOk()">
            　 <input type="button" value="取 消" onclick="ClickCancel()">
          </td>
      </tr>
      </form>
    </table>
      </body>
    </html>
      

  7.   

    <html>
    <head>
    <script language="JavaScript">  <!--
    // moveList用于对两个多选列表进行选项的移动操作
    // from为"需要移动"的列表名称，to为"移动到"列表名称
    function moveList(from,to) {  
      var fromList = document.myForm.elements[from];
      var fromLen = fromList.options.length;  var toList = document.myForm.elements[to];
      var toLen = toList.options.length;  // current 为"需要移动"列表中的当前选项序号
      var current = fromList.selectedIndex;
      // 如果"需要移动"列表中有选择项，则进行移动操作
      while (current>-1) {
        // o为"需要移动"列表中当前选择项对象
        var o = fromList.options[current];
        var t = o.text;
        var v = o.value;
        // 根据已选项新建一个列表选项
        var optionName = new Option(t, v, false, false);
        // 将该选项添加到"移动到"列表中
        toList.options[toLen]= optionName;
        toLen++;
        // 将该选项从"需要移动"列表中清除
        fromList.options[current]=null;    current = fromList.selectedIndex;
      }
    }//--></script>
    </head>
    <body>
    <form name="myForm">
      <table>
        <tr valign="top">
          <td>
            <select name="leftList" multiple size="6" style="width:50px;"> 
              <option>a</option>
              <option>b</option>
              <option>c</option>
            </select>
          </td>
          <td>
            <!-- 通过事件onclick调用JavaScript的moveList函数 -->
            <input type="button" name="to" value=" >> "  onclick="moveList('leftList','rightList')"><p>
            <input type="button" name="backTo" value=" << " onclick="moveList('rightList','leftList')"><p>
          </td>
          <td>
            <select name="rightList" multiple size="6" style="width: 50px;">
              <option>d</option>
              <option>e</option>
              <option>f</option>
            </select>
          </td>
        </tr>
      </table>
    </form>
    </body>
    </html>