< html >

< head >

< title > DataListBox </ title >

< style >

input  {

 BORDER-RIGHT :  #002D96 1px solid ;  PADDING-RIGHT :  2px ;  BORDER-TOP :  #002D96 1px solid ;  PADDING-LEFT :  2px ;  FONT-SIZE :  12px ;  FILTER :  progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA) ;  BORDER-LEFT :  #002D96 1px solid ;  CURSOR :  hand ;  COLOR :  black ;  PADDING-TOP :  2px ;  BORDER-BOTTOM :  #002D96 1px solid

}

</ style >

< script  language ="javascript"  type ="text/javascript" >

// <

function  left_Data(ListBook1,ListBook2)

{

     // 如果传的不是一个字符串 可以直接当对象用 

     var  lb1  = document.getElementById(ListBook1);

     var  lb2 = document.getElementById(ListBook2);

     var  option = lb2.getElementsByTagName( " option " );

     // 下面的表达式可以拿到数据 也可以直接 ListBook1.appendChild 增加元素 

     // var option1=ListBook1.getElementsByTagName("option");

     var  str = "" ;

     for ( var  i = 0 ;i < option.length; ++ i)

    {

         if (option[i].selected)

        {

            lb1.appendChild(CopyElement(option[i]));

            str += i;

        }

    }

     for ( var  j = str.length - 1 ;j >= 0 ; -- j)

    {

        lb2.removeChild(lb2.options[str.charAt(j)]);

    }

}

// >

function  right_Data(ListBook1,ListBook2)

{

     var  lb1  = document.getElementById(ListBook1);

     var  option = lb1.getElementsByTagName( " option " );

     var  lb2 = document.getElementById(ListBook2);

     var  str = "" ;

     for ( var  i = 0 ;i < option.length; ++ i)

    {

         if (option[i].selected)

        {

            lb2.appendChild(CopyElement(option[i]));

            str += i;

        }

    }

    

     for ( var  j = (str.length - 1 );j >= 0 ; -- j)

    {

        lb1.removeChild(lb1.options[str.charAt(j)]);

    }

    

}

// <<

function  leftAll_Data(ListBook1,ListBook2)

{

     var  lb1  = document.getElementById(ListBook1);

     var  lb2 = document.getElementById(ListBook2);

     var  option = lb2.getElementsByTagName( " option " );

     for ( var  i = 0 ;i < option.length; ++ i)

    {

        lb1.appendChild(CopyElement(option[i]));

    }

    ClearListBox(ListBook2);

}

// >>

function  rightAll_Data(ListBook1,ListBook2)

{

     var  lb1  = document.getElementById(ListBook1);

     var  option = lb1.getElementsByTagName( " option " );

     var  lb2 = document.getElementById(ListBook2);

     for ( var  i = 0 ;i < option.length; ++ i)

    {

        lb2.appendChild(CopyElement(option[i]));

    }

    ClearListBox(ListBook1);

}

// 拷贝元素 

function  CopyElement(option)

{

     var  NewOption  =  document.createElement( " option " );

    NewOption.setAttribute( " value " ,option.value);

    NewOption.appendChild(document.createTextNode(option.text));

     return  NewOption;

}

// 清空元素

function  ClearListBox(ListBook)

{

     var  lb1 = document.getElementById(ListBook);

     while (lb1.childNodes.length > 0 )

    {

        lb1.removeChild(lb1.childNodes[ 0 ]);

    }

}

</ script >

</ head >

< body >

< form  name ="frm"  method ="post"  action ="" >

< table >

     < tr >

         < td >

             < select  name ="ListBox1"  multiple ="multiple"  rows ="5"  height ="120" >

                 < option  value ="sh" > 上海 </ option >

                 < option  value ="bj" > 北京 </ option >

                 < option  value ="tj" > 天津 </ option >

                 < option  value ="cq" > 重庆 </ option >

             </ select >

         </ td >

         < td >

             < input  type ="button"  value =">"  onclick ="right_Data('ListBox1','ListBox2');" />

             < input  type ="button"  value =">>"  onclick ="rightAll_Data('ListBox1','ListBox2');" />

             < input  type ="button"  value ="<"  onclick ="left_Data(ListBox1,'ListBox2');" />

             < input  type ="button"  value ="<<"  onclick ="leftAll_Data('ListBox1','ListBox2');" />

         </ td >

         < td >

             < select  name ="ListBox2"  multiple ="multiple"  rows ="5"  height ="120" >

                 < option  value ="sz" > 苏州 </ option >

                 < option  value ="hz" > 杭州 </ option >

                 < option  value ="jz" > 荆州 </ option >

                 < option  value ="qz" > 靖州 </ option >

             </ select >

         </ td >

     </ tr >

</ table >

</ form >

</ body >

</ html >