SelectDemo

Html页面

 <table border="0" width="100%" cellspacing="0" cellpadding="0">
               <tr>
                   <td width="30%" rowspan="4">
                    <select  id="colname1 " name="colname1 " οndblclick="JavaScript:Add('colname1','colname2','colname')"></select>
                   </td> 
                   <td width="15%"></td>
                   <td width="35%" rowspan="4" id="colnameDiv">
                   <select  id="colname2 " name="colname2 " οndblclick="JavaScript:Remove('colname1','colname2','colname')"></select>


                  
                   </td>  
                   
                   <td width="20%"></td>
                </tr>  
             
                  <tr>                  
                  <td width="90" align="center">
                    <input name="DoAddb" type="button" value=">>" onClick="JavaScript:Add()" >
                  </td>
                  <td width="120" align="center">
                     <input name="doup" type="button" value="向上" onClick="upcol()" >
                                  </td>
                  </tr>
                  <tr>
                 <td width="90" align="center">
                    <input name="DoDelb" type="button" value="<<"  onClick="JavaScript:Remove()">
                 </td>
                 <td width="120" align="center">
                <input name="dodown"  type="button" value="向下" onClick="downcol()" >
                 </td>
                  </tr>
  
                  <tr><td width="73">
                   
                  </td></tr>     
           </table>  

Js写法：

function Add() {
    $("#colname1 option:selected").appendTo($("#colname2"));
  }

  function Remove() {
  $("#colname2 option:selected").appendTo($("#colname1"));
  }
     
     
  function upcol() {
  //获取选中的右侧option元素
  var rightcol = $("#colname2 option:selected"); 
  //option的第一个元素无法上移，rightcol.get(0)表示选中的option对象，rightcol.get(0).index表示option对象的位置索引，从0开始
       if(rightcol.get(0).index!=0){  
       rightcol.each(function(){  
  $(this).prev().before($(this));  //在当前选中对象的前面插入该对象
  //$(this).insertBefore($(this).prev());//等同于
  });  
  }  
  }
  function downcol() {
  //选择所有的对象
  var allrightcol = $("#colname2 option");  
  //选择被选中的对象
  var rightcol = $("#colname2 option:selected");  
  //option的最后一个元素无法下移
  if(rightcol.get(rightcol.length-1).index!=allrightcol.length-1){  
   //循环选中的对象
   for(i=rightcol.length-1;i>=0;i--){  
    //获取选中的对象
    var item = $(rightcol.get(i));  
  item.insertAfter(item.next());  //将选中的对象插入到下一个对象的后面
  //item.next().after(item);//等同于
   }  
 } 
  }