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 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
js友好的时间返回函数
Aug 24 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
js实现登录拖拽窗口
Feb 10 Javascript
javascript canvas API内容整理
Feb 16 Javascript
怎么引入(调用)一个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扩展ZF――Validate扩展
2008/01/10 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
微信支付的开发流程详解
2016/09/13 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
javascript jQuery插件练习
2008/12/24 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python 监测文件是否更新的方法
2019/06/10 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
python PIL模块的基本使用
2020/09/29 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
电大毕业自我鉴定
2014/02/03 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
初三学生个人自我评定
2014/04/06 职场文书
毕业留言寄语大全
2014/04/10 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
平安建设工作方案
2014/06/02 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书