Jquery实现select multiple左右添加和删除功能的简单实例

项目要实现这样的一个功能（如下图所示）:选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的。
具体代码如下：

<center> <table> <tr align="center"><td colspan="3">选择</td> </tr> <tr><td><select id="fb_list" name="fb_list" multiple="multiple"size="8" style="width: 300px; height:200px;"></select></td><td><input type="button" id="selectup" name="selectup" value="上移∧" /><br /><input type="button" id="add" name="add" value="添加>>" /><br /><input type="button" id="delete" name="delete" value="<<移除" /><br /><input type="button" id="selectdown" name="selectdown" value="下移∨" /></td><td><select id="select_list" name="select_list" multiple="multiple"size="8" style="width: 300px; height:200px;"></select></td> </tr> </table> </center>$（function（）{ $.post（"testAction！excute.action",null,function（data）{// var to_data = eval（"（"+data+"）"）; var array = eval（data）;var obj = document.getElementById（"fb_list"）;var value = "";for（var i=0;i<array.length;i++）{ value = array[i].id + "/" + array[i].name + "/" + array[i].tel; obj.options[i] = new Option（value,value）; //obj.add（newOption）; }}）}）;//向右移动$（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（"请选择要删除的分包！"）;           }     }）}）//向上移动$（function（）{ $（"#selectup"）.click（function（）{ if（$（"select[name="fb_list"] option:selected"）.length > 0）{ $（"select[name="fb_list"] option:selected"）.each（function（）{ $（this）.prev（）.before（$（this））; }） }else{ alert（"请选择要移动的数据！"）; } }）}）//向下移动$（function（）{ $（"#selectdown"）.click（function（）{ if（$（"select[name="fb_list"] option:selected"）.length > 0）{ $（"select[name="fb_list"] option:selected"）.each（function（）{ //$（this）.next（）.after（$（this））; $（this）.insertAfter（$（this）.next（））; }） }else{ alert（"请选择要移动的数据！"）; } }）}）

以上这篇Jquery实现select multiple左右添加和删除功能的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。