《Jquery实现select multiple左右添加和删除功能的简洁实例_.docx》由会员分享，可在线阅读，更多相关《Jquery实现select multiple左右添加和删除功能的简洁实例_.docx（7页珍藏版）》请在三一文库上搜索。
1、Jquery实现select multiple左右添加和删除功能的简洁实例_ 下面我就为大家带来一篇Jquery实现select multiple左右添加和删除功能的简洁实例。我觉得挺不错的，现在就分享给大家，也给大家做个参考。 项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.信任用js许多伴侣都写过,下面是我用jQuery来实现这样的功能的。 代码如下: center table tr align=center td colspan=3 选择 /
2、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=butto
3、n 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); va
4、r obj = document.getElementById(fb_list); var value = ; for(var i=0;iarray.length;i+) value = arrayi.id + / + arrayi.name + / + arrayi.tel; obj.optionsi = new Option(value,value); /obj.add(newOption); ) ); /向右移动 $(function() $(#add).click(function() if($(#fb_list option:selected).length0) $(#fb_list
5、 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).length0) $(#select_list option:selected).each(function() $(#
6、fb_list).append(option value=+$(this).val()+$(this).text()+/option); $(this).remove(); ) else alert(请选择要删除的分包！); ) ) /向上移动 $(function() $(#selectup).click(function() if($(selectname=fb_list option:selected).length 0) $(selectname=fb_list option:selected).each(function() $(this).prev().before($(this)
7、; ) else alert(请选择要移动的数据!); ) ) /向下移动 $(function() $(#selectdown).click(function() if($(selectname=fb_list option:selected).length 0) $(selectname=fb_list option:selected).each(function() /$(this).next().after($(this); $(this).insertAfter($(this).next(); ) else alert(请选择要移动的数据!); ) ) 以上这篇Jquery实现select multiple左右添加和删除功能的简洁实例就是我分享给大家的全部内容了，盼望能给大家一个参考 .