基于jquery实现选择框内容的左右移动 增删代码共享

在本文中，这个例子告诉我们选择框的内容可以左右移动，添加和删除。分享给大家参考。具体如下：选择选择框的内容左右移动。添加和删除代码基于jquery-1.8.3.min.js实现，简单实用。选择选项内容，单击“移动”按钮左右移动，双击选项内容左右移动。支持单选运动、多选运动、一键全动！

操作效果图：检查效果。

提示：如果浏览器工作不正常，可以尝试切换浏览模式。为每个人共享的代码如下

hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleselect选择框内容左右移动添加删除代码/title style type=' text/CSS ' * { margin :0；划水：0;列表样式-:型无；outline:none}a，img { border :0 } body { font :12 px/normal ' Microsoft ya hei '；}.选择框{ width:500px高度：220 pxmargin:100px auto}。selectbox div { float:left}。选择框选择栏{ padd :0 20px}.选择框。选择栏选择{宽度：150像素高度：200 pxborder:1px #A0A0A4实心；padd :4 px font-size :14 px；font-family: "微软雅黑";}.btn-bar{} .BTN-巴尔p {页边距-顶部：16像素；}.BTN酒吧p . BTN {宽度：50像素；高度：30 px光标：指针指针；font-family : simsunfont-size :14 px}/style脚本类型=' text/JavaScript ' src=' http : js/jquery-1。8 .3 .量滴js/script脚本类型=' text/JavaScript ' $(function(){//移到右边$('#add ').单击(函数(){ //先判断是否有选中if(！$('#select1选项').是(“选择了：”){警报(”请选择需要移动的选项') } //获取选中的选项，删除并追加给对方else { $(' # select 1 options : selected ').appendo(' # select 2 ')；} });//移到左边$('#remove ').单击(函数(){ //先判断是否有选中if(！$('#select2选项').是(“选择了：”){警报(”请选择需要移动的选项)} else { $(' #选择2个选项： selected ').appendo(' # select 1 ')；} });//全部移到右边$('#add_all ').单击(函数(){ //获取全部的选项，删除并追加给对方$('#select1选项').appendo(' # select 2 ')；});//全部移到左边$('#remove_all ').单击(function(){ $('#select2 option ')).appendo(' # select 1 ')；});//双击选项$('#select1 ').dblclick(function(){ //绑定双击事件//获取全部的选项，删除并追加给对方$('option:selected '，this).appendo(' # select 2 ')；//追加给对方});//双击选项$('#select2 ').dblclick(function(){ $(' option : selected '，this).appendo(' # select 1 ')；});});/script/head dydiv class=' selectbox ' div class=' select-bar ' select multiple=' multiple ' id=' select 1 '选项值='超级管理员'超级管理员/option选项值='普通管理员'普通管理员/option选项值='信息发布员'信息发布员/option选项值='财务管理员'财务管理员/option选项值='产品管理员'产品管理员/option选项值='资源管理员'资源管理员/option选项值='系统管理员'系统管理员/option选项值='超级管理员'超级管理员/option选项值='普通管理员'普通管理员/option选项值='信息发布员'信息发布员/option选项值='财务管理员'财务管理员/option选项值='产品管理员'产品管理员/option选项值='资源管理员'资源管理员/option选项值='A5源码A5号号源码/option/select/div class=' BTN-巴' PS pan id=' add '输入类型=' button ' class=' BTN '值=' title='移动选择项到右侧//span/p pspan id=' add _ all '输入类型='按钮class=' BTN ' value=' title='全部移到右侧//span/p pspan id=' remove '输入类型=' button ' class=' BTN '值=' title='移动选择项到左侧//span/p pspan id=' remove _ all '输入类型=' button ' class=' BTN '值=' title='全部移到左侧//span/p/div div class=' select-bar ' select multiple=' multiple ' id=' select 2 '/select/div/div style=' text-align : center； /div/body/html以上就是为大家分享的挑选选择框内容左右移动添加删除代码，希望大家可以喜欢。