jquery实现下拉框左右选择功能


Posted in Javascript onFebruary 21, 2017

1、说明

本文demo实现下拉框左右选择

2、代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <style type="text/css">
 .centent
 {
 width: 260px;
 }
 .cententl
 {
 float: left;
 }

 .btnAdd
 {
 float: left;
 padding:30px 5px;
 }
 </style>
 <script src="scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
 //移到右边
 $('#btnAdd').click(function () {
 //获取选中的选项,删除自己并追加给对方
 $('#select1 option:selected').appendTo('#select2');
 });
 //移到左边
 $('#btnDel').click(function () {
 //获取选中的选项,删除自己并追加给对方
 $('#select2 option:selected').appendTo('#select1');
 });
 //全部移到右边
 $('#btnAdds').click(function () {
 //获取全部的选项,删除自己并追加给对方
 $('#select1 option').appendTo('#select2');
 });
 //全部移到左边
 $('#btnDels').click(function () {
 //获取全部的选项,删除自己并追加给对方
 $('#select2 option').appendTo('#select1');
 });
 //双击选项
 $('#select1').dblclick(function () {
 //获取双击的选项,删除自己并追加给对方
 $("option:selected", this).appendTo('#select2');
 });
 //双击选项
 $('#select2').dblclick(function () {
 //获取双击的选项,删除自己并追加给对方
 $("option:selected", this).appendTo('#select1');
 });
 });
 </script>
</head>
<body>
 <div class="centent">
 <div class="cententl">
 <select multiple="multiple" id="select1" style="width: 100px; height: 160px;">
 <option value="1">课程1</option>
 <option value="2">课程2</option>
 <option value="3">课程3</option>
 <option value="4">课程4</option>
 <option value="5">课程5</option>
 <option value="6">课程6</option>
 <option value="7">课程7</option>
 <option value="8">课程8</option>
 </select>
 </div>
 <div class="btnAdd">
 <input type="button" id="btnAdd" value=" > " /><br />
 <input type="button" id="btnDel" value=" < " /><br />
 <input type="button" id="btnAdds" value=">>" /><br />
 <input type="button" id="btnDels" value="<<" />
 </div>
 <div>
 <select multiple="multiple" id="select2" style="width: 100px; height: 160px;">
 </select>
 </div>
 </div>
</body>
</html>

jquery实现下拉框左右选择功能

图(1)

jquery实现下拉框左右选择功能

图(2)

jquery实现下拉框左右选择功能

图(3)

3、Demo

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript instanceof 与typeof使用说明
Jan 11 Javascript
js+css实现导航效果实例
Feb 10 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
Angular简单验证功能示例
Dec 22 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
jquery实现页面加载效果
Feb 21 #Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 #Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 #Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 #Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 #Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 #Javascript
从零学习node.js之文件操作(三)
Feb 21 #Javascript
You might like
解析thinkphp的左右值无限分类
2013/06/20 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
Web服务器框架 Tornado简介
2014/07/16 Python
python中常用的九种预处理方法分享
2016/09/11 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
入党申请人的自我鉴定
2013/12/01 职场文书
大学应届生的自我评价
2014/03/06 职场文书
经销商年会策划方案
2014/05/29 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
化验室岗位职责
2015/02/14 职场文书