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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 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正则匹配汉字的方法介绍
2013/04/25 PHP
php url路由入门实例
2014/04/23 PHP
php的dl函数用法实例
2014/11/06 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
js+css在交互上的应用
2010/07/18 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
python如何通过protobuf实现rpc
2016/03/06 Python
对python中的logger模块全面讲解
2018/04/28 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python实现门限回归方式
2020/02/29 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
共产党员公开承诺书
2014/03/25 职场文书
超市员工管理制度
2015/08/06 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书