JavaScript——DataListBox(组合框)

< 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 >