Jquery实现选择多个左右添加和删除功能的简单实例

项目要实现这样的一个功能（如下图所示):选择左边下拉列表框中的选项，点击添加按钮，把选择的选项移动到右边的下拉列表框中，同样的选择右边的选项，点击删除按钮，即把选择的选项移动到左边的下拉列表框中。相信用射流研究…很多朋友都写过，下面是我用框架来实现这样的功能的。

具体代码如下：

中心表tr align='center' td colspan='3 '选择/TD/tr/tr TD select id=' FB _ list ' name=' FB _ list ' multiple=' multiple ' size=' 8 ' style=' width : 300 px；'height:200px'/select /td td输入类型=' button ' id=' selectup ' name=' selectup ' value='上移/br/输入类型=' button ' id=' add ' name=' add ' value='添加/br /输入类型=' button ' id=' delete ' name=' delete ' value='移除/br /输入类型=' button ' id=' selectdown ' name=' selectdown ' value='下移'//TD TD select id=' select _ list ' name=' select _ list ' multiple=' multiple ' size=' 8 ' style=' width : 300 px；' height :200 px '/select/TD/tr/table/center $(function(){ $).post('testAction！excute.action '，null，函数（数据){//var to _ data=eval('(' data ')')；定义变量数组=eval(数据);var obj=文档。getelementbyid(' FB _ list ')；定义变量值=' ';for(var I=0；iarray.lengthi ){ value=array[i].id '/'数组[i].'姓名'数组[i].电话；选项=新选项（值，值);//obj。添加(新选项)；} })});//向右移动$(函数(){$('#add ')).单击(function(){ if($(' # FB _ list options : selected ')。长度0){ $('选择了# FB _ list选项： ').每个（函数(){ $(“# select _ list”)).追加('选项值='' $(这个)).val() ''' $(this).text()'/option ')；$(这个)。移除();}) } else { alert('请选择要添加的分包!');} })})//向左移动$(函数(){$('#delete ')).单击(function(){ if($(' # select _ list options : selected ')。长度0){ $(' # select _ list选项： selected ').每个（函数(){ $('#fb_list ').追加('选项值='' $(这个)).val() ''' $(this).text()'/option ')；$(这个)。移除();}) } else { alert('请选择要删除的分包!');} })})//向上移动$(function(){ $('#selectup ')).单击(function(){ if($('选择[name=' FB _ list ']选项： selected ').长度0){ $('选择[名称=' FB _ list ']选项：已选中').每个（函数(){ $(此)).prev().在($(本))之前；}) }else{ alert('请选择要移动的数据!');} })})//向下移动$(function(){ $('#selectdown ')).单击(function(){ if($('选择[name=' FB _ list ']选项： selected ').长度0){ $('选择[名称=' FB _ list ']选项：已选中').每个（函数(){ //$(此)).下一个()。在($(本))之后；$(这个)。在($(this)之后插入.next())；}) }else{ alert('请选择要移动的数据!');} })})以上这篇框架实现选择多个左右添加和删除功能的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。