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 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
javascript event 事件解析
Jan 31 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
再谈javascript原型继承
Nov 10 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
JavaScript中Function详解
Feb 27 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
详解webpack babel的配置
Jan 09 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
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
PHP session有效期问题
2009/04/26 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
JS实现手风琴特效
2020/11/08 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
python开发前景如何
2020/06/11 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
python压包的概念及实例详解
2021/02/17 Python
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
c语言常见笔试题总结
2016/09/05 面试题
公益广告语集锦
2014/03/13 职场文书
终止劳动合同协议书
2014/10/05 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
2014年幼师工作总结
2014/11/22 职场文书
先进班组事迹材料
2014/12/25 职场文书
旅游项目合作意向书
2015/05/08 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL