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 相关文章推荐
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 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结合飞信 免费天气预报短信
2009/05/07 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python制作动态字符图的实例
2019/01/27 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
详解KMP算法以及python如何实现
2020/09/18 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
出国签证在职证明
2014/01/16 职场文书
十周年庆典策划方案
2014/06/03 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
化工厂员工工作总结
2015/10/15 职场文书
vue 给数组添加新对象并赋值
2022/04/20 Vue.js