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 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
openlayers实现图标拖动获取坐标
Sep 25 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
Python-for循环的内部机制
2020/06/12 Python
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
办护照工作证明范本
2014/01/14 职场文书
联谊活动策划书
2014/01/26 职场文书
幼儿发展评估方案
2014/06/11 职场文书
岳麓书院导游词
2015/02/03 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
Python图像处理之图像拼接
2021/04/28 Python
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers