在用一个页面中,怎么将一个列表中选择的选项传递到另外一个列表中?

http://fason.nease.net/samples/js/moveoptions.html

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function moveSelected(oSourceSel,oTargetSel)
    {
        //建立存储value和text的缓存数组
        var arrSelValue = new Array();
        var arrSelText = new Array();
        //此数组存贮选中的options，以value来对应
        var arrValueTextRelation = new Array();
        var index = 0;//用来辅助建立缓存数组

        //存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系
        for(var i=0; i<oSourceSel.options.length; i++)
        {
            if(oSourceSel.options[i].selected)
            {
                //存储
                arrSelValue[index] = oSourceSel.options[i].value;
                arrSelText[index] = oSourceSel.options[i].text;
                //建立value和选中option的对应关系
                arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
                index ++;
            }
        }

        //增加缓存的数据到目的列表框中，并删除源列表框中的对应项
        for(var i=0; i<arrSelText.length; i++)
        {
            //增加
            var oOption = document.createElement("option");
            oOption.text = arrSelText[i];
            oOption.value = arrSelValue[i];
            oTargetSel.add(oOption);
            //删除源列表框中的对应项
            oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
        }
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
      <SELECT name="left" size="10" id="select" multiple style="width:100px; ">
       <OPTION value="aaaaa">aaaaa</OPTION>
       <OPTION value="bbbbb">bbbbb</OPTION>
       <OPTION value="ccccc">ccccc</OPTION>
      </SELECT>
      <INPUT style="border:1px solid black " type="button" value=">>>" onClick="moveSelected(document.all.left,document.all.right)">
      <INPUT style="border:1px solid black " type="button" value="<<<" onClick="moveSelected(document.all.right,document.all.left)">
      <SELECT name="right" size="10" id="select" multiple style="width:100px; ">
       <OPTION value="ddddd">ddddd</OPTION>
       <OPTION value="eeeee">eeeee</OPTION>
       <OPTION value="fffff">fffff</OPTION>
       <OPTION value="ggggg">ggggg</OPTION>
       <OPTION value="hhhhh">hhhhh</OPTION>
       <OPTION value="iiiii">iiiii</OPTION>
      </SELECT>
    </BODY>
    </HTML>
      

  2.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Page Selection</title>
    <style>
    td{white-space:nowrap};
    body{margin-left:0;margin-right:0;margin-top=0;margin-bottom=0};
    </style>
    </head><body bgcolor=eeeeee><table>
    <tr > 
    <td> 
    <select name=CASelect size=6 style="font-size:11pt;width=200;height=160px" onchange="preMoveRight(this)" > 
    <option value="1">test1</option> 
    <option value="2">test2</option> 
    <option value="3">test3</option> 
    <option value="4">test4</option> 
    </select>
    </td> 
    <td align="center">    
    <input align="left" type=button value="→"  disabled name=ToRightButton onclick="moveRight()"><br><br>
    <input align="left" type=button value="←"  disabled name=ToLeftButton onclick="moveLeft()" width="10%">
    </td>
    <td> 
    <select name=CSSelect size=6 style="font-size:11pt;width=200;height=160px" onchange="preMoveLeft(this)" > 
    <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> 
    </select>
    </td> 
    <td>
    <input type=button value="↑"  disabled name=ToUpButton onclick="moveUp()" disabled><br><br>
    <input type=button value="↓"  disabled name=ToDownButton onclick="moveDown()" disabled>
    </td>
    </tr> 
    </table>
    </body>  
      
    <script language=javascript>  
    function moveUp()  
    {  
    i=document.all.CSSelect.selectedIndex;
    document.all.CSSelect.options[i].swapNode(document.all.CSSelect.options[(i==0)?(document.all.CSSelect.length-1):i-1]);
    }  
      
    function moveDown()  
    { 
    i=document.all.CSSelect.selectedIndex;
    document.all.CSSelect.options[i].swapNode(document.all.CSSelect.options[(i<document.all.CSSelect.length-1)?(i+1):0]);
    }  
      
      
    function preMoveLeft(obj)  
    {  
    if (obj.value)   
    {  
    document.all.ToLeftButton.disabled=false;  
    document.all.ToUpButton.disabled=false;  
    document.all.ToDownButton.disabled=false;  
      
      
    }  
    }  
    function moveLeft()  
    {  
    document.all.ToLeftButton.disabled=true;  
    document.all.ToUpButton.disabled=true;  
    document.all.ToDownButton.disabled=true;  
    var oldOption=document.all.CSSelect.options[document.all.CSSelect.selectedIndex];  
    var newOption=new Option(oldOption.text,oldOption.value);  
    document.all.CSSelect.remove(document.all.CSSelect.selectedIndex);  
    document.all.CASelect.add(newOption);  
      
      
    }  
      
    function preMoveRight(obj)  
    {  
    if (obj.value)   
    {
    document.all.ToRightButton.disabled=false;  
    }
    }  
    function moveRight()  
    {  
    document.all.ToRightButton.disabled=true;  
    var oldOption=document.all.CASelect.options[document.all.CASelect.selectedIndex];  
    var newOption=new Option(oldOption.text,oldOption.value);  
    document.all.CASelect.remove(document.all.CASelect.selectedIndex);  
    document.all.CSSelect.add(newOption);  
      
      
    }  
      
     
    </script>  
      

  3.   

    <select id="loption" MULTIPLE size=5 onchange="for(i=0;i<options.length;i++){if(options[i].selected){roption.options[i]=new Option(options[i].text,options[i].value)}};">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <select id="roption" MULTIPLE size=5 onchange="for(i=0;i<options.length;i++){if(options[i].selected){roption.options[i]=null}};"></select>