两个下拉文本框之间的值互换（急救）

阿信做的，^_^<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0050)http://fason.nease.net/samples/js/moveoptions.html -->
<HTML><HEAD><TITLE>【下拉框项移动程序】</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1269" name=GENERATOR>
<META content=fason,阿信,蒲佛信 name=Author>
<META content=下拉菜单,dhtml,移动,上下,左右,fason,阿信,蒲佛信 name=Keywords>
<META content=此程序为下拉菜单项间的左右上下移动控制程序，有问题请往[email protected]发信 
name=Description>
<STYLE>BODY {
FONT-SIZE: 9pt; FONT-FAMILY: Verdana
}
SELECT {
FONT-SIZE: 9pt; FONT-FAMILY: Verdana
}
</STYLE><SCRIPT language=JavaScript src="【下拉框项移动程序】.files/loader.js"></SCRIPT><SCRIPT language=JavaScript>
<!--
//** Power by Fason
//** Email:[email protected] move(s1,s2,flag){
var tem=new Array();
var sa=document.frm.elements[s1];
var sb=document.frm.elements[s2];
var s=sa.selectedIndex>-1?1:0
with(sa)
for(i=length-1;i>=0;i--)
if(options[i].selected||flag){tem[tem.length]=options[i];options[i]=null}
if(s||flag)
{
for(i=0;i<sb.length;i++) tem[tem.length]=sb.options[i]
with(sb)
{
length=0;
tem.sort(sortArr)
for(i=0;i<tem.length;i++) options[length]=new Option(tem[i].text,tem[i].value)
}
}
}/*move_self(s,flag):s是列表框name,flag(1,-1)，是上移或下移*/
function move_self(s,flag)
{
var sa=document.frm.elements[s]
var tem;
with(sa)
{
if(flag==1)
{
if(selectedIndex>0)
for(i=0;i<length;i++)
if(options[i].selected)
{
tem_text=options[i].text;tem_value=options[i].value;
options[i].text = options[i-1].text;
options[i].value = options[i-1].value;
options[i-1].text = tem_text;options[i-1].value = tem_value;
options[i-1].selected = true;options[i].selected = false;
}
}
else
{
for(i=length-1;i>=0;i--)
if(options[i].selected)
{
if(i==length-1)break;
tem_text=options[i].text;tem_value=options[i].value;
options[i].text = options[i+1].text;
options[i].value = options[i+1].value;
options[i+1].text = tem_text;options[i+1].value = tem_value;
options[i+1].selected=true;options[i].selected=false;
}
}
}
}/*显示列表框选中的值,s是列表框的name*/
function show(s)
{
var str=""
with(document.frm.elements[s])
for(i=0;i<length;i++)
if(options[i].selected)
str+="\n第"+(i+1)+"个option:\ntext:"+options[i].text+" value:"+options[i].value;
alert(str);
}function sortArr(a,b)
{
if(a.text>b.text)return 1
if(a.text<b.text)return -1
return 0
}//-->
</SCRIPT>
</HEAD>
<BODY bgColor=#e0e0e0>
<SCRIPT>loader();</SCRIPT><HR><CENTER>
<TABLE>
  <FORM name=frm>
  <TBODY>
  <TR>
    <TD align=middle><SELECT style="WIDTH: 100px" multiple size=5 name=a> 
        <OPTION value=a1>1</OPTION> <OPTION value=a2>2</OPTION> <OPTION 
        value=a3>3</OPTION> <OPTION value=a4>4</OPTION></SELECT> </TD>
    <TD align=middle width=50><INPUT onclick="move('a','b',1)" type=button value=" >> "><BR><INPUT onclick="move('a','b')" type=button value=" > "><BR><INPUT onclick="move('b','a')" type=button value=" < "><BR><INPUT onclick="move('b','a',1)" type=button value=" << "> 
    </TD>
    <TD align=middle><SELECT style="WIDTH: 100px" multiple size=5 name=b> 
        <OPTION value=b1>a</OPTION> <OPTION value=b2>b</OPTION> <OPTION 
        value=b3>c</OPTION> <OPTION value=b4>d</OPTION> <OPTION 
        value=b5>e</OPTION></SELECT> </TD></TR>
  <TR>
    <TD align=middle><INPUT onclick="move_self('a',1)" type=button value="Move Up"> 
<INPUT onclick="move_self('a',-1)" type=button value="Move Down"> </TD>
    <TD>&nbsp;</TD>
    <TD align=middle><INPUT onclick="move_self('b',1)" type=button value="Move Up"> 
<INPUT onclick="move_self('b',-1)" type=button value="Move Down"> </TD></TR>
  <TR>
    <TD align=middle><INPUT onclick="show('a')" type=button value="get a's value"></TD>
    <TD>&nbsp;</TD>
    <TD align=middle><INPUT onclick="show('b')" type=button value="get b's value"></TD></TR></FORM></TBODY></TABLE></CENTER><BR><BR><BR><BR>本程序是关于下拉菜单之间的移动控制程序，在ie5.x,ie6,ns6+以上能正常运行<BR><BR>更多精彩的程序请往<A 
style="COLOR: red" href="http://fason.nease.net/">主页</A>,请关注阿信的个人站点。 
<HR><CENTER><FONT color=red size=2>欢迎光临！</FONT><BR><FONT size=2>你是第<IMG 
src="【下拉框项移动程序】.files/count.png" align=absMiddle>位来访者！</FONT> 
</CENTER></BODY></HTML>

解决方案 »

  1.   

    //src为源下拉/列表框，dst为目的下拉/列表框；该方法添加源中选定的项到目的，并不删除源中的项。
    function addItem(src,dst){
        for(i=1;i<src.options.length;i++){
            if(src.item(i).selected){
                var l=dst.options.length;
                var text1=src.item(i).text;
                var text2=src.item(i).value;
                var isExist=false;
                for(j=1;j<l;j++){
                    if(dst.item(j).value==text2){
                        isExist=true;
                        break;
                    }
                }
                if(!isExist){
                    var opt=new Option(text1,text2);
                    dst.options[l]=opt;
                }
            }
        }
    }//dst为下拉/列表框；该方法删除下拉/列表框选定的项。
    function deleteItem(dst){
        var l=dst.options.length;
        for(i=l-1;i>0;i--){
            if(dst.item(i).selected){
                dst.remove(i);
            }
        }
    }
      

  2.   

    很简单的功能，应该自己摸索一下
    可以用DHTML
      

  3.   

    <script language=javascript>
    function move2right()
    {
        var op1=form1.D1.options,op2=form1.D2.options;
        var lastElement=null;
        for(var i=op1.length-1;i>=0;i--)
          if (op1[i].selected)
          {
              lastElement=form1.D2.insertBefore(op1[i],lastElement);
              
          }}
    function all_move2right()
    {
        var op1=form1.D1.options,op2=form1.D2.options;
        var lastElement=null;
        while(op1.length>0)
        {
            op2.appendChild(op1[0]);
        }
    }
    function move2left()
    {
        var op1=form1.D1.options,op2=form1.D2.options;
        var lastElement=null;
        for(var i=op2.length-1;i>=0;i--)
          if (op2[i].selected)
          {
              lastElement=form1.D1.insertBefore(op2[i],lastElement);
              
          }}
    function all_move2left()
    {
        var op1=form1.D1.options,op2=form1.D2.options;
        var lastElement=null;
        while(op2.length>0)
        {
            op1.appendChild(op2[0]);
        }
    }
    </script>
    <form name=form1><p>&nbsp;&nbsp;&nbsp; 
    <select size="7" name="D1" multiple style="width:50px">
    <option value="0">AAA</option>
    <option value="1">BBB</option>
    <option value="3">CCC</option>
    </select><select size="7" name="D2" multiple style="width:50px">
    <option value="4">DDD</option>
    <option value="5">EEE</option>
    <option value="6">FFF</option>
    </select></p><p>&nbsp;&nbsp;&nbsp; 
    <input type="button" value="&lt;" name="B3" onclick="move2left()">
    <input type="button" value="&lt;&lt;" name="B4" onclick="all_move2left()">
    <input type="button" value="&gt;&gt;" name="B5" onclick="all_move2right()">
    <input type="button" value="&gt;" name="B6" onclick="move2right()"></p></form>