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背投广告代码的完善
Apr 08 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 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实现小型站点广告管理(修正版)
2006/10/09 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
JS 继承实例分析
2008/11/04 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Python 字典dict使用介绍
2014/11/30 Python
Python列表append和+的区别浅析
2015/02/02 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
什么是Remote Module
2016/06/10 面试题
计算机应用职专应届生求职信
2013/11/12 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
MySQL创建管理子分区
2022/04/13 MySQL