js实现列表框选项的删除，排序,俩列表框间的选项传递。

 列表框选项的删除，排序。俩列表框间的选项传递。

 

<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >
< HTML >
  < HEAD >
  < title > 列表框选项删除，排序 </ title >
  </ HEAD >
< style >
* {font - size:12px;line - height: 130 % ;}
body{background - color: #CCFFFF;}
</ style >

  < BODY >

歌曲编号： 4 , 8 , 9 , 10 , 11 , 12 , 14 < br >
< FORM METHOD = POST ACTION = ""  name = " form1 "  onsubmit = " sub() " >


< TABLE >
< TR >
     < TD >
     < SELECT NAME = " songs "  id = " songs "  size = 7 ><!-- 主列表框   -->  
         < OPTION VALUE = " 4 " > fire fly </ OPTION >
         < OPTION VALUE = " 8 " > nothing  in  the world </ OPTION >
         < OPTION VALUE = " 9 " > whole again </ OPTION >
         < OPTION VALUE = " 10 " > who is it </ OPTION >
         < OPTION VALUE = " 11 " > 勇敢的幸福 </ OPTION >
         < OPTION VALUE = " 12 " > 小小幸福 </ OPTION >
         < OPTION VALUE = " 14 " > I need you vs. I need you </ OPTION >     
        </ SELECT >
     </ TD >
     < TD >
         < input type = button onclick = " movetop() "  value = ↑ >< BR ><!-- 上移   -->
         < input type = button onclick = " moveout() "  value = → >< BR ><!-- 删除  -->
         < input type = button onclick = " movein() "  value = ← >< BR >   <!-- 取回来   -->
         < input type = button onclick = " movedown() "  value = ↓ >     <!-- 下移   -->
     </ TD >
     < TD >
       < SELECT NAME = " out "  size = 7 ><!-- 回收的列表框   -->
        
     < OPTION VALUE = "" >--</ OPTION >
     < OPTION VALUE = "" >--</ OPTION >
     < OPTION VALUE = "" >--</ OPTION >
     < OPTION VALUE = "" >--</ OPTION >
     < OPTION VALUE = "" >--</ OPTION >
     < OPTION VALUE = "" >--</ OPTION >
     < OPTION VALUE = "" >--</ OPTION >     
       </ SELECT >
     </ TD >
</ TR >
</ TABLE >

< INPUT TYPE = " submit "  value = " 提交 " >< BR >

</ FORM >
< SCRIPT LANGUAGE = " JavaScript " >
 s = document.getElementById( " songs " );
 d = document.getElementById( " out " );

   function  movetop()  //
  {
   now = s.selectedIndex;
    if (s.selectedIndex > 0 ){
   now -- ;
    var  temp = s.options[s.selectedIndex].text;  
   s.options[s.selectedIndex].text = s.options[now].text;
   s.options[now].text = temp;
    var  temp1 = s.options[s.selectedIndex].value;  
   s.options[s.selectedIndex].value = s.options[now].value;
   s.options[now].value = temp1;
   s.selectedIndex -- ;
   }  
    // window.alert(s.options[s.selectedIndex].value);
  }
  function  movedown()  //
  {
   now = s.selectedIndex;
    if (s.selectedIndex < s.options.length){
   now ++ ;
    var  temp = s.options[s.selectedIndex].text;  
   s.options[s.selectedIndex].text = s.options[now].text;
   s.options[now].text = temp;
    var  temp1 = s.options[s.selectedIndex].value;  
   s.options[s.selectedIndex].value = s.options[now].value;
   s.options[now].value = temp1;
   s.selectedIndex ++ ;
   }  
    // window.alert(s.options[s.selectedIndex].value);
  }
  function  moveout()  //
  {
   now = s.selectedIndex;
    var  temp = 0 ;
      for (i = 0 ;i < d.options.length;i ++ )
     {
        if (d.options[i].value != "" ){temp = i + 1 ;}
     }
   d.options[temp].text = s.options[now].text;
   d.options[temp].value = s.options[now].value;
   s.remove(now);

  }

  function  movein()  //
  {
   if (d.selectedIndex >= 0 && d.options[d.selectedIndex].value != "" )
   {
   now = d.selectedIndex;
    var  temp = 0 ;

    if (s.selectedIndex >= 0 )
       {
       temp = s.selectedIndex;
      s.options[s.options.length] = new  Option( "" , "" , true , true ); 
         for (i = s.options.length - 1 ;i >= temp + 1 ;i -- )
        {
          s.options[i].text = s.options[i - 1 ].text;
          s.options[i].value = s.options[i - 1 ].value;
        }
       s.options[temp + 1 ].text = d.options[now].text;
       s.options[temp + 1 ].value = d.options[now].value;
       d.remove(now);
       s.selectedIndex = temp + 1 ;
       }
    else
       {
     temp = s.options.length;
     s.options[s.options.length] = new  Option( "" , "" , true , true ); 
     s.options[temp].text = d.options[now].text;
     s.options[temp].value = d.options[now].value;
     d.remove(now);
       }

   }
  }
function  sub()  //
{
  ids = "" ;
    for (i = 0 ;i < s.options.length;i ++ )
   {
    ids += s.options[i].value + " , " ;

   }
  ids = ids.substr( 0 ,ids.length - 1 );
  window.alert( " 歌曲编号： " + ids);
}
</ SCRIPT >
  </ BODY >
</ HTML >