Ajax <select>标签的应用向左移动，向右移动

<select>标签属性 selectedIndex:该下标返回下拉表总的索引值

注：如果有多个被选中的情况下，永远返回第一个被选中的索引值，索引最小的那个

      如果没有选中的情况下，返回-1

<%@  page  language = "java"  contentType = "text/html; charset=UTF-8"

     pageEncoding =  "UTF-8" %>

<! DOCTYPE  html  PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"  >

< html >

< head >

< meta  http-equiv = "Content-Type"  content = "text/html; charset=UTF-8" >

< title >  Insert title here </ title  >

</ head >

< body >

< table >

< td >

         < select    size =  "12"  multiple  = "multiple"  id =  "first"  name  = "first" >

         < option  value =  "选项1" > 选项1  </ option >

         < option  value =  "选项2" > 选项2  </ option >

         < option  value =  "选项3" > 选项3  </ option >

         < option  value =  "选项4" > 选项4  </ option >

         < option  value =  "选项5" > 选项6  </ option >

         < option  value =  "选项7" > 选项7  </ option >

         < option  value =  "选项8" > 选项8  </ option >

         < option  value =  "选项9" > 选项9  </ option >

         < option  value =  "选项10" > 选项10  </ option >

         </ select >

</ td >

< td >

         < input  type =  "button"  value  = "---->"  id =  "add"  name  = "add"  class = "button" /><  br >

         < input  type =  "button"  value  = "====>"  id =  "addAll"  name  = "addAll"  class = "button"  />< br >

         < input  type =  "button"  value  = " < ----"  id =  "remove"  name  = "remove"  class = "button"  />< br >

         < input  type =  "button"  value  = " < ===="  id =  "removeAll"  name  = "removeAll"  class = "button"  />< br >

</ td >

< td >

         < select    size =  "12"  multiple  = "multiple"  id =  "seconde"  name  = "seconde" >

         < option  value =  "选项11" > 选项11  </ option >

         </ select >

</ td >

</ table >

</ body >

< script  type =  "text/javascript" >

         var  firstSelect=document.getElementById( "first"  );

         var  secondeSelect=document.getElementById( "seconde"  );

         var  firstOptionElements=firstSelect.getElementsByTagName( "option" );

         var  secondeOptionElements=secondeSelect.getElementsByTagName( "option" );

         /*************************************从左向右移动选中项************************************************************/

       document.getElementById(  "add" ).οnclick= function (){

                var  firstOptionLength=firstOptionElements.length;

                for ( var  i=0;i <  firstOptionLength;i++){

                       if (firstSelect.selectedIndex!= -  1){

                            secondeSelect.appendChild(firstOptionElements[firstSelect.selectedIndex]);

                     }

              }

       };

         /***********************************从左向右点击按钮全部移动*******************************************************/

       document.getElementById(  "addAll" ).οnclick= function (){

                var  firstOptionLength=firstOptionElements.length;

                for ( var  i=0;i <  firstOptionLength;i++){

                           secondeSelect.appendChild(firstOptionElements[0]);

              }

       };

         /***********************************从左向右双击移动****************************************************************/

       document.getElementById(  "first" ).οndblclick= function (){

                var  firstOptionLength=firstOptionElements.length;

                for ( var  i=0;i <  firstOptionLength;i++){

                            secondeSelect.appendChild(firstOptionElements[firstSelect.selectedIndex]);

              }

       };

       

       

         /*************************************从右向左移动选中项************************************************************/

       

       document.getElementById(  "remove" ).οnclick= function (){

                var  length=secondeOptionElements.length;

                for ( var  i=0;i <  length;i++){

                       if (secondeSelect.selectedIndex!= -  1){

                            firstSelect.appendChild(secondeOptionElements[secondeSelect.selectedIndex]);

                     }

              }

       };

         /**********************************从右向左点击按钮全部移动*******************************************************/

       document.getElementById(  "removeAll" ).οnclick= function (){

                var  length=secondeOptionElements.length;

                for ( var  i=0;i <  length;i++){

                      firstSelect.appendChild(secondeOptionElements[0]);

              }

       };

         /***********************************从右向左双击移动****************************************************************/

       document.getElementById(  "seconde" ).οndblclick= function (){

                var  length=secondeOptionElements.length;

                for ( var  i=0;i <  length;i++){

                      firstSelect.appendChild(secondeOptionElements[secondeSelect.selectedIndex]);

              }

       };

</ script >

</ html >