求类似于ＯＡ的．．．ＪＳ

<table>
<tr>
<td>
<select id="rs" size="4" multiple="multiple" onDblClick="change(this);" style="height:278px;width:100;">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
</td>
<td><font onclick=change(rs) style="cursor:hand">>></font><br><font onclick=change(ls) style="cursor:hand"><<</font></td>
<td>
<select id="ls" size="4" multiple="multiple" onDblClick="change(this);" style="height:278px;width:100;">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
</td>
</tr>
</table><script>
function change(obj)
{
lstSource = (obj.id=="rs"?"ls":"rs");
for(i=obj.options.length-1;i>=0;i--)
{
if(obj.options[i].selected)
{
var op = document.createElement("option");
op.text = obj.options[i].text;
op.value = obj.options[i].value;
op.selected = true;
eval(lstSource+".options.add(op)");
obj.options.remove(i);
}
}
}
</script>

解决方案 »

  1.   

    可这种左边也是select 我如何把我的树型结构　嵌进去咧？
      

  2.   

    select版
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>made by meixx</title>
    <script language="javascript">
    <!--
    function Add(ObjSource,ObjTarget){
    for(var i=ObjSource.length-1;i>=0;i--){
    if(ObjSource.options[i].selected){
    var opt=document.createElement("OPTION");
    ObjTarget.add(opt);
    opt.value=ObjSource.options[i].value;
    opt.text=ObjSource.options[i].text;
    ObjSource.options.removeChild(ObjSource.options[i]);
    opt.selected=true;
    }
    }
    /*
    for(var i=0;i<ObjSource.length;i++){
    if(ObjSource.options[i].selected){
    var opt=document.createElement("OPTION");
    ObjTarget.add(opt);
    opt.value=ObjSource.options[i].value;
    opt.text=ObjSource.options[i].text;
    ObjSource.options.removeChild(ObjSource.options[i--]);
    opt.selected=true;
    }
    }*/
    }
    function AddAll(ObjSource,ObjTarget){
    SelectAll(ObjSource);
    Add(ObjSource,ObjTarget);
    }
    function SelectAll(ObjSource){
    for(var i=0;i<ObjSource.length;i++){
    ObjSource.options[i].selected=true;
    }
    }function doSubmit(){
    SelectAll(frmDisplay.dltTarget);
    //frmDisplay.action="";//设置form 提交的action
    alert(frmDisplay.action);
    //frmDisplay.submit();//取消注释即可,提交上去的options
    }
    //->
    </script>
    </head><body>
    <table width="350" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0">
      <tr>
        <td width="150">
    <select name="dltSource" size="10" multiple style="width:100% ">
    <option value="0">辽宁</option>
    <option value="0">黑龙江</option>
    <option value="0">吉林</option>
    <option value="0">河北</option>
    <option value="0">河南</option>
    <option value="0">江苏</option>
    <option value="0">浙江</option>
    <option value="0">海南</option>
    <option value="0">福建</option>
    <option value="0">山东</option>
    <option value="0">青海</option>
    <option value="0">宁夏</option>
    <option value="0">内蒙古</option>
    <option value="0">新疆</option>
    <option value="0">陕西</option>
    </select>
    </td>
        <td width="50" valign="middle">
    <p style="width:100%" align="center"><input type="button" value="->" onClick="Add(document.all.dltSource,frmDisplay.dltTarget)" title="添加"></p>
    <p style="width:100%" align="center"><input type="button" value="=>" onClick="AddAll(document.all.dltSource,frmDisplay.dltTarget)" title="添加全部"></p>
    <p style="width:100%" align="center"><input type="button" value="<-" onClick="Add(frmDisplay.dltTarget,document.all.dltSource)" title="删除"></p>
    <p style="width:100%" align="center"><input type="button" value="<=" onClick="AddAll(frmDisplay.dltTarget,document.all.dltSource)" title="删除全部"></p>
    </td>
        <td width="150">
    <form id="frmDisplay" action="xxx.jsp" method="post" style="margin:0 ">
    <select name="dltTarget" size="10" multiple style="width:100% "></select>
    </form>
    </td>
      </tr>
      <tr>
        <td align="center">作者:梅雪香</td>
        <td align="center">ver:1.0</td>
        <td align="center">
    <input type="reset" onClick="javascript:window.location.reload();" value="重置">&nbsp;&nbsp;
    <input type="button" value="提交" onClick="doSubmit()">
    </td>
      </tr>
    </table></body>
    </html>
    table版
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>made by meixx</title>
    <style type="css/text">
    body{font-size:10pt}
    </style>
    <script language="javascript">
    <!--
    var curRowSource=null;
    var curRowTarget=null;
    function selectRow(obj){
    if(curRowSource){
    curRowSource.style.backgroundColor="#FFFFFF";
    curRowSource.style.color="#000000";
    }
    obj.style.backgroundColor="#3366FF";
    obj.style.color="#FFFFFF";
    curRowSource=obj;
    var btns=document.getElementsByName("btn");
    btns[0].disabled=false;
    }
    function selectRow1(obj){
    if(curRowTarget){
    curRowTarget.style.backgroundColor="#FFFFFF";
    curRowTarget.style.color="#000000";
    }
    obj.style.backgroundColor="#3366FF";
    obj.style.color="#FFFFFF";
    curRowTarget=obj;
    var btns=document.getElementsByName("btn");
    btns[2].disabled=false;
    }
    function Add(tbSou,tbTar){
    var rowSou=null;
    var newRow=tbTar.insertRow();
    if(tbSou.id=="tbSource"){
    rowSou=curRowSource;
    newRow.attachEvent("onclick",function(){selectRow1(newRow);});
    }
    else{
    rowSou=curRowTarget;
    newRow.attachEvent("onclick",function(){selectRow(newRow);});
    }
    for(var i=0;i<rowSou.cells.length;i++){
    var newCell=newRow.insertCell();
    newCell.innerHTML=rowSou.cells[i].innerHTML;
    }
    tbSou.deleteRow(rowSou.rowIndex);
    var btns=document.getElementsByName("btn");
    btns[0].disabled=true;
    btns[2].disabled=true;
    }function AddAll(tbSource,tbTarget){
    for(var i=1;;i++){
    if(tbSource.rows.length==1) return;
    tbSource.rows[1].click();
    Add(tbSource,tbTarget);
    }

    }
    function doSubmit(){
    SelectAll(frmDisplay.dltTarget);
    //frmDisplay.action="";//设置form 提交的action
    alert(frmDisplay.action);
    //frmDisplay.submit();//取消注释即可,提交上去的options
    }
    //->
    </script>
    </head><body>
    <table width="550" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0">
      <tr>
        <td width="250" valign="top">
    <table id="tbSource" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse;cursor:default" bordercolor="#CCFFFF" width="100%">
    <tr>
    <td align="center" width="25%">姓名</td><td align="center" width="25%">性别</td><td align="center" width="25%">年龄</td><td align="center" width="25%">身高</td>
    </tr>
    <tr onclick="selectRow(this)">
    <td>冯程程</td><td>女</td><td>22</td><td>167</td>
    </tr>
    <tr onclick="selectRow(this)">
    <td>任盈盈</td><td>女</td><td>19</td><td>168</td>
    </tr>
    <tr onclick="selectRow(this)">
    <td>杨玉环</td><td>女</td><td>18</td><td>162</td>
    </tr>
    <tr onclick="selectRow(this)">
    <td>赢政</td><td>男</td><td>45</td><td>182</td>
    </tr>
    <tr onclick="selectRow(this)">
    <td>项少龙</td><td>男</td><td>28</td><td>176</td>
    </tr>
    </table>
    </td>
        <td width="50" valign="middle">
    <br>
    <p style="width:100%" align="center"><input name="btn" type="button" value="->" onClick="Add(document.all.tbSource,tbTarget)" title="添加" disabled></p>
    <p style="width:100%" align="center"><input name="btn" type="button" value="=>" onClick="AddAll(document.all.tbSource,tbTarget)" title="添加全部"></p>
    <p style="width:100%" align="center"><input name="btn" type="button" value="<-" onClick="Add(tbTarget,document.all.tbSource)" title="删除" disabled></p>
    <p style="width:100%" align="center"><input name="btn" type="button" value="<=" onClick="AddAll(tbTarget,document.all.tbSource)" title="删除全部"></p>
    <br>
    </td>
        <td width="250" valign="top">
    <form id="frmDisplay" action="xxx.jsp" method="post" style="margin:0 ">
    <table id="tbTarget" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse" bordercolor="#CCFFFF" width="100%">
    <tr>
    <td align="center" width="25%">姓名</td><td align="center" width="25%">性别</td><td align="center" width="25%">年龄</td><td align="center" width="25%">身高</td>
    </tr>
    </table>
    </form>
    </td>
      </tr>
      <tr>
        <td align="center">作者:梅雪香</td>
        <td align="center">ver:1.0</td>
        <td align="center">
    <input type="reset" onClick="javascript:window.location.reload();" value="重置">&nbsp;&nbsp;
    <input type="button" value="提交" onClick="doSubmit()">2
    </td>
      </tr>
    </table></body>
    </html>