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 相关文章推荐
accesskey 提交
Jun 26 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 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
Laravel中任务调度console使用方法小结
2017/05/07 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
php swoft框架实例用法
2020/12/22 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
python爬虫常用的模块分析
2014/08/29 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
python使用super()出现错误解决办法
2017/08/14 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
Python with语句用法原理详解
2020/07/03 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
实体的生命周期
2013/08/31 面试题
体育教育个人自荐信范文
2013/12/01 职场文书
好人好事事迹材料
2014/02/12 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
商家认证委托书格式
2014/10/16 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis