jQuery实现下拉框功能实例代码


Posted in Javascript onMay 06, 2016

说一百句,不如我给大家贴张效果图,效果图请看下面:

jQuery实现下拉框功能实例代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

div.centent {
float: left;
text-align: center;
margin: 10px;
}

span {
display: block;
margin: 2px 2px;
padding: 4px 10px;
background: #898989;
cursor: pointer;
font-size: 12px;
color: white;
}
</style>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function () {
$("#add").click(function () {//单个添加
var $options = $("#select1 option:selected");
$options.appendTo("#select2");
});
$("#add_all").click(function () {//全部添加
$("#select1 option").each(function () {
$(this).appendTo("#select2");
/*
也可以写为:
var p=$("#select1 option");
p.appendTo("#select2");
*/
});
});
$("#remove").click(function () {//同上,只不过方向相反
var $options = $("#select2 option:selected");
// var $remove = $options.remove();
$options.appendTo("#select1");
});
$("#remove_all").click(function () {//同上,只不过方向相反
var p = $("#select2 option");
p.appendTo("#select1");
});
});

</script>
</head>
<body>
<div class="centent">
<select 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>
</select>

<div>
<span id="add">选中添加到右边>></span>
<span id="add_all">全部添加到右边>;></span>
</div>
</div>
<div class="centent">
<select multiple id="select2" style="width:100px;height:160px"></select>

<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</body>
</html>

以上内容是小编给大家介绍的jquery 下拉框功能实例,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 Javascript
jQuery 实现评论等级好评差评特效
May 06 #Javascript
Node.js插件安装图文教程
May 06 #Javascript
node.js插件nodeclipse安装图文教程
Oct 19 #Javascript
javascript实现平滑无缝滚动
Aug 09 #Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 #Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 #Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 #Javascript
You might like
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
php压缩文件夹最新版
2018/07/18 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
怎么清空javascript数组
2013/05/11 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python在线运行代码助手
2016/07/15 Python
python字典快速保存于读取的方法
2018/03/23 Python
python3 读写文件换行符的方法
2018/04/09 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
模具数控专业自荐信
2014/01/27 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
银行贷款收入证明
2014/10/17 职场文书
法定授权委托证明书
2015/06/18 职场文书