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


Posted in Javascript onMay 26, 2016

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左右添加和删除功能的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
怎么引入(调用)一个JS文件
May 26 #Javascript
JS加载器如何动态加载外部js文件
May 26 #Javascript
jquery获取复选框的值的简单实例
May 26 #Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 #Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 #Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 #Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 #Javascript
You might like
php cli换行示例
2014/04/22 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
php intval函数用法总结
2019/04/14 PHP
VBScript版代码高亮
2006/06/26 Javascript
对象的类型:本地对象(1)
2006/12/29 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
python 基于opencv操作摄像头
2020/12/24 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
先进个人事迹材料
2014/01/25 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
个人租房协议书范本
2014/09/30 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
Vue vee-validate插件的简单使用
2021/06/22 Vue.js