javascript实现在左边List列表选取后在右边List列表显示

javascript实现在左边List列表选取后在右边List列表显示！

解决方案 »

  1.   

    参考JK的代码：
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>
    </head> 
    <body >
     
    <div style="font-size:10pt;">
    注1：左右移动进行选取 <br/>      <br/>
    注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>       
    注-----：作者JK：<a href="mailTo:[email protected]?subject=About%20MoveRightOrLeft">[email protected]</a><br/>    
    <hr/>
    </div><form name=frm><table>
    <tr > 
    <td> 
    <select name=SrcSelect size=6 style="font-size:11pt;width:200px;height:160px" multiple ondblclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)"> 
    <option value="1">test1</option> 
    <option value="2">test2</option> 
    <option value="3">test3</option> 
    <option value="4">test4</option> 
    <option value="5">test5</option> 
    <option value="6">test6</option> 
    <option value="7">test7</option> 
    <option value="8">test8</option> 
    <option value="9">test9</option> 
    </select>
    </td> 
    <td width="30px">    
    <input align="left" type=button value=">"  onclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)"  ><br><br>
    <input align="left" type=button value="<"  onclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)"  >
    </td>
    <td> 
    <select name=ObjSelect size=6 style="font-size:11pt;width:200px;height:160px" multiple ondblclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)"> 
    <option value="11">test11</option> 
    <option value="12">test12</option> 
    <option value="13">test13</option> 
    <option value="14">test14</option> 
    <option value="15">test15</option> 
    <option value="16">test16</option> 
    </select>
    </td> 
    <td width="30px">
    <input type=button value="A"  onclick="moveUp()" > <br><br> 
    <input type=button value="V"  onclick="moveDown()" >
    </td>
    </tr> 
    </table></form>
    </body>  
      
    <script language=javascript>  
    function moveUp()  
    { 
    var theObjOptions=document.frm.ObjSelect.options;
    for(var i=1;i<theObjOptions.length;i++)
    {
    if( theObjOptions[i].selected && !theObjOptions[i-1].selected )
    {
    swapOptionProperties(theObjOptions[i],theObjOptions[i-1]);
    }
    }
    }  
      
    function moveDown()  
    { 
    var theObjOptions=document.frm.ObjSelect.options;
    for(var i=theObjOptions.length-2;i>-1;i--)
    {
    if( theObjOptions[i].selected && !theObjOptions[i+1].selected )
    {
    swapOptionProperties(theObjOptions[i],theObjOptions[i+1]);
    }
    }
    }  function swapOptionProperties(option1,option2){
    var tempStr=option1.value;
    option1.value=option2.value;
    option1.value=tempStr;
    tempStr=option1.text;
    option1.text=option2.text;
    option2.text=tempStr;
    tempStr=option1.selected;
    option1.selected=option2.selected;
    option2.selected=tempStr;
    }  
      
    function moveLeftOrRight(fromObj,toObj)  
    {  
    for(var i=0;i<fromObj.length;i++)
    {
    var srcOption=fromObj.options[i];
    if(srcOption.selected)
    {
    toObj.appendChild(srcOption);
    i--;
    }
    }
    }  
      
      
     
    </script> 
      

  2.   

    <SELECT onchange="fuzhi(this)">
    <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>
    <OPTION value="6">6</OPTION>
    </SELECT
    <SELECT id="list2">
    </SELECT>
    <script language="javascript">
    function fuzhi(list)
    { 
      var listtext = list.options[list.selectedIndex].text;
      var listvalue = list.options[list.selectedIndex].value;
      document.getElementById("list2").options.add(new Option(listtext,listvalue));
    }
    </script>
      

  3.   

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListMove.aspx.cs" Inherits="ListMove" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
        <script language="javascript" type="text/javascript">
        function move(a,b)
        {
            var lstFrom = document.getElementById(a);
            var lstTo = document.getElementById(b);
            if(lstFrom.options.length>0)
            {
                for(var i=0;i<lstFrom.options.length;i++)
                {
                    if(lstFrom.options[i].selected)
                    {
                        var listText = lstFrom.options[i].text;
                        var listValue = lstFrom.options[i].value;
                        lstTo.options.add(new Option(listText,listValue));
                        lstFrom.options.remove(i);
                    }
                }
            }
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div style="margin-left: 20; margin-top: 2; border:1; width: 53%; height: 200px;">
                    <asp:ListBox ID="lstFrom" runat="server" Height="198px" Width="90px">
                        <asp:ListItem>a</asp:ListItem>
                        <asp:ListItem Value="b"></asp:ListItem>
                        <asp:ListItem>c</asp:ListItem>
                        <asp:ListItem>d</asp:ListItem>
                        <asp:ListItem>e</asp:ListItem>
                    
                    </asp:ListBox>
                    <button id="btnMove" onclick="move('lstFrom','lstTo')">
                        &gt;&gt;&gt;</button>
                    <asp:ListBox ID="lstTo" runat="server" Height="198px" Width="90px" style="margin-left:500"></asp:ListBox></div>
                    
                    <div style=" margin-left:2; margin-top:2; border:1; width:45%; padding-left:10"></div>
            </div>
        </form>
    </body>
    </html>
      

  4.   

    这个支持多选:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListMove.aspx.cs" Inherits="ListMove" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
        <script language="javascript" type="text/javascript">
        function move(a,b)
        {
            var lstFrom = document.getElementById(a);
            var lstTo = document.getElementById(b);
            if(lstFrom.options.length>0)
            {
                for(var i=0;i<lstFrom.options.length;i++)
                {
                    if(lstFrom.options[i].selected)
                    {
                        var listText = lstFrom.options[i].text;
                        var listValue = lstFrom.options[i].value;
                        lstTo.options.add(new Option(listText,listValue));
                        lstFrom.options.remove(i);
                        i--;
                    }
                }
            }
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div style="margin-left: 20; margin-top: 2; border:1; width: 53%; height: 200px;">
                    <asp:ListBox ID="lstFrom" runat="server" Height="198px" Width="90px" SelectionMode="Multiple">
                        <asp:ListItem>a</asp:ListItem>
                        <asp:ListItem Value="b"></asp:ListItem>
                        <asp:ListItem>c</asp:ListItem>
                        <asp:ListItem>d</asp:ListItem>
                        <asp:ListItem>e</asp:ListItem>
                    
                    </asp:ListBox>
                    <button id="btnMove" onclick="move('lstFrom','lstTo')">&gt;&gt;&gt;</button>
                    <asp:ListBox ID="lstTo" runat="server" Height="198px" Width="90px" style="margin-left:500"></asp:ListBox></div>
                    
                    <div style=" margin-left:2; margin-top:2; border:1; width:45%; padding-left:10"></div>
            </div>
        </form>
    </body>
    </html>