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优化技巧(文件瘦身篇)
Jan 28 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 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+javascript液晶时钟
2006/10/09 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
js获取浏览器基本信息大全
2014/11/27 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
react-router实现跳转传值的方法示例
2017/05/27 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
如何管理Vue中的缓存页面
2021/02/06 Vue.js
在Python的循环体中使用else语句的方法
2015/03/30 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
python实现将文本转换成语音的方法
2015/05/28 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
自动化职业生涯规划书范文
2014/01/03 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
出纳试用期自我评价
2015/03/10 职场文书
运动会开幕式主持词
2015/07/01 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
导游词之南京栖霞山
2019/10/18 职场文书