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 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
javascript整除实现代码
Nov 23 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
Angular8 实现table表格表头固定效果
Jan 03 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实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
广州地球村科技数据库题目
2016/04/25 面试题
法人授权委托书
2014/04/03 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
庆元旦主持词
2015/07/06 职场文书