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实现自己的DOM选择器原理及代码
Mar 04 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
解决python replace函数替换无效问题
2020/01/18 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
授权委托书协议书
2014/10/16 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
刑事附带民事代理词
2015/05/25 职场文书
龙猫观后感
2015/06/09 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
Python字符串的转义字符
2022/04/07 Python