jquery select多选框的左右移动 具体实现代码

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

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

  <title>无标题文档</title>

  <script type="text/javascript" src="jquery-1.4.4.min.js"></script>

  <script type="text/javascript">

  /**

   *动态的给左边的下拉列表创建选项

   *具体情况可以从数据库读取数据动态创建选项

   */

  $(document).ready(function(){

    for(var i=1;i<=5;i++)

    {

    $("#fb_list").append("<option value='"+i+"'>公开招标小型机采购00"+i+"</option>"); 

    }

  })

  $(function(){

  $("#add").click(function(){

       if($("#fb_list option:selected").length>0)

       {

           $("#fb_list option:selected").each(function(){

              $("#select_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");

              $(this).remove(); 

           })

       }

       else

       {

           alert("请选择要添加的分包!");

       }

   })

  })

  $(function(){

      $("#delete").click(function(){

           if($("#select_list option:selected").length>0)

           {

               $("#select_list option:selected").each(function(){

                     $("#fb_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");

                     $(this).remove(); 

               })

           }

           else

           {

               alert("请选择要删除的分包!");

           }

     })

  })

  </script>

  </head>

  <body>

  <table width="95%" cellpadding="0" align="center" class="listshow" border="1" cellspacing="0">

  <tr>

  <td colspan="4" align="center">选择分包</td>

  </tr>

  <tr>

   <td class="black" width="30%" align="center" height="150">

   <select id="fb_list" multiple="multiple" style="text-align:center;width:300px;height:150px;"></select> 

   </td>

  <td align="center" width="5%">

    <input type="button" id="add" value="添加>>" />

      <br/>

      <br/>

      <input type="button" id="delete" value="<<删除" />

    </td>

    <td class="black" width="30%" align="center">

    <select id="select_list" multiple="multiple" style=" text-align:center;width:300px;height:150px;"></select>

    </td>

  </tr>

  </table>

  </body>

  </html>