SelectDemo

Html页面

 <table border="0" width="100%" cellspacing="0" cellpadding="0">

               <tr>

                   <td width="30%" rowspan="4">

                    <select  id="colname1 " name="colname1 " ondblclick="JavaScript:Add('colname1','colname2','colname')"></select>

                   </td> 

                   <td width="15%"></td>

                   <td width="35%" rowspan="4" id="colnameDiv">

                   <select  id="colname2 " name="colname2 " ondblclick="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的第一个元素无法上移，right
853f
col.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);//等同于
   }  
 } 

  }