jquery中dom操作和事件的实例学习 下拉框应用


Posted in Javascript onDecember 01, 2011

今天这个demo是有关下拉框的。

<div class="centent"> 
<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> 
</select> 
<div> 
<span id="add" >选中添加到右边>></span> 
<span id="add_all" >全部添加到右边>></span> 
</div> 
</div> 
<div class="centent"> 
<select multiple="multiple" id="select2" style="width: 100px;height:160px;"> 
<option value="8">选项8</option> 
</select> 
</div>

实现的功能是,能将左边选中的选项添加到右边,双击左边某个选项也能添加给右边,点击全部添加到右边的按钮能把左边都添加到右边去。
jquery代码:
<script type="text/javascript"> 
$(function(){ 
$('#add').click(function(){ 
var $option=$('#select1 option:selected'); 
$option.appendTo('#select2'); 
}) 
$('#add_all').click(function(){ 
var $option=$('#select1 option'); 
$option.appendTo('#select2'); 
}) 
$('#select1').dblclick(function(){ 
var $option=$('option:selected',this); 
$option.appendTo('#select2'); 
}) 
}) 
</script>

dblclick()是鼠标双击事件时触发。
其他的方法和事件之前的例子都有介绍,就不说了。
这个demo代码简单。而且功能确还说实用吧。
Javascript 相关文章推荐
Javascript判断对象是否相等实现代码
Mar 18 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
JS代码放在head和body中的区别分析
Dec 01 #Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 #Javascript
js取滚动条的尺寸的函数代码
Nov 30 #Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 #Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 #Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 #Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 #Javascript
You might like
php获取淘宝分类id示例
2014/01/16 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
python的正则表达式re模块的常用方法
2013/03/09 Python
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
幼儿园家长会邀请函
2014/01/15 职场文书
运动会广播稿80字
2014/01/23 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
浅谈MySQL user权限表
2021/06/18 MySQL
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang