- 浏览: 6306119 次
- 性别:
- 来自: 一片神奇的土地
文章分类
- 全部博客 (745)
- JQuery (25)
- JS (33)
- 数据库 (59)
- Java基础 (56)
- JSON (8)
- XML (8)
- ireport (7)
- 设计模式 (10)
- 心情 (14)
- freemarker (1)
- 问题 (15)
- powerdesigner (2)
- CSS (15)
- DWR (4)
- tomcat (16)
- Hibernate (12)
- Oracle (7)
- Struts (7)
- Spring (34)
- JSP (23)
- 需学习 (64)
- 工具类库 (63)
- Maven (14)
- 笔试题 (34)
- 源码学习 (31)
- 多线程 (39)
- Android (32)
- 缓存 (20)
- SpringMVC (14)
- jQueryEasyUi (12)
- webservice-RPC (13)
- ant (1)
- ASP.NET (10)
- 正则表达式 (3)
- Linux (15)
- JBoss (1)
- EJB (3)
- UML (2)
- JMS (3)
- Flex (8)
- JSTL (2)
- 批处理 (5)
- JVM (16)
- 【工具】 (16)
- 数据结构 (29)
- HTTP/TCP/Socket (18)
- 微信 (1)
- tomcat源码学习 (15)
- Python (30)
- 主机 (2)
- 设计与架构 (19)
- thrift-RPC (2)
- nginx (6)
- 微信小程序 (0)
- 分布式+集群 (12)
- IO (1)
- 消息队列 (4)
- 存储过程 (8)
- redis (9)
- zookeeper (5)
- 海量数据 (5)
最新评论
-
360pluse:
技术更新,战术升级!Python爬虫案例实战从零开始一站通网盘 ...
Python爬虫实战:Scrapy豆瓣电影爬取 -
18335864773:
推荐用 pageoffice 组件生成 word 文件。
JAVA生成WORD工具类 -
jjhe369:
LISTD_ONE 写道起始地址为163.135.0.1 结束 ...
IP地址与CIDR -
baojunhu99:
private final int POOL_SIZE = 5 ...
使用CompletionService获取多线程返回值 -
LovingBaby:
胡说,javascript 运行时是单线程的,event lo ...
Ajax请求是否可以实现同步
jQuery实现在左边双击某一项时添加到右边,右边时添加到左边:
部分修饰代码简略:
<table style="..."> <tr> <td colspan="2" valign="top" width="47%"> <select multiple="multiple" id="uncountryTable" name="uncountryTable" style="height:300px;width:245px;"> </select> </td> <td align="center"> ... </td> <td colspan="2" valign="top" width="47%"> <select multiple="multiple" id="countryTable" name="countryTable" style="height:300px;width:245px;"> </select> </td> </tr> </table>
以左边为例:
刚开始我的思路是这样的: 当左边select变化时,如果有一项选中,那么当它被双击时就执行相应的操作;但当实施时才发现这样根本不可行,代码如下:
//jQuery("#uncountryTable").change(function(){ //jQuery("#uncountryTable option").each(function(){ //if(jQuery(this).attr("selected") == true){ //jQuery(this).dblclick(function(){ //alert(111111); //var option = "<option value='"+jQuery(this).val()+"'>"+jQuery(this).text()+"</option>"; //jQuery("#countryTable").append(option); //jQuery(this).remove(); //}); //} //}); //});
其实一直到判断选中的这一步都是正确的,经测试此时也确实可以alert出相应选中项的值
(多选下拉框获取选中文本、value: 也可以用change方法)
//jQuery("#uncountryTable").change(function(){ //jQuery("#uncountryTable option").each(function(){ //if(jQuery(this).attr("selected") == true){ //alert(jQuery(this).val()+":"+jQuery(this).text()); //} //}); //});
但是一到dblclick(fn)方法这步就有问题了,连测试的111111都不弹出,几经测试都无效果,无奈只得另谋它路。
在网上搜了一下,发现一个哥们用JS写的同样效果代码(下面),看了之后才发现原来自己想得太复杂了,正确思路应该是这样的: 当双击select的时候,触发dblclick(fn)事件,如果某一项被选中(你双击某一项,它就肯定被选中啦),就将其添加到右边,这样就可以实现效果,哈哈。
上代码:
jQuery(document).ready(function() { jQuery("#uncountryTable").dblclick(function(){ jQuery("#uncountryTable option:selected").each(function(){ var option = "<option value='"+jQuery(this).val()+"'>"+jQuery(this).text()+"</option>"; jQuery("#countryTable").append(option); jQuery(this).remove(); }); }); });
很简单的东西,换下思路就实现了,因此,以后遇到问题时,就先问下自己,是不是我想得太复杂了,哈哈......
那哥们效果+代码(主要部分):
<head> <script> function removeItem(){ var sltSrc=document.getElementById('sltSrc'); var sltTarget=document.getElementById('sltTarget'); for(var i=0;i<sltSrc.options.length;i++) { var tempOption=sltSrc.options[i]; if(tempOption.selected){ sltSrc.removeChild(tempOption); sltTarget.appendChild(tempOption); } } } </script> </head> <body> <select ondblclick="removeItem();" id="sltSrc" multiple="true"> <option value="a">srcA</option> <option value="b">srcB</option> <option value="c">srcC</option> </select> <select ondblclick="addItem();" id="sltTarget" multiple="true"> <option value="a">targetA</option> <option value="b">targetB</option> <option value="c">targetC</option> </select> <div id="showInfo"></div> <input type="button" value="showSelectOptions" onclick="showSelectOptions();"/> </body>
链接:http://www.cnblogs.com/hanxianlong/archive/2009/03/31/1426095.html
发表评论
-
抢购学习
2019-03-01 10:53 963来源:https://blog.csdn.net/lius ... -
JSONP跨域
2019-02-26 11:31 938jQuery jsonp跨域请求(很详细) json和j ... -
Ajax请求是否可以实现同步
2018-06-14 10:32 5054Ajax请求是否可以实现同步 当JS代码加载到当前A ... -
jQuery新特性总结
2017-09-18 16:00 855$(document).on: 从jQuery1.7开始 ... -
jQuery中map函数
2017-04-06 10:13 1185两种方式: 1、直接jQuery.map //将原数组中 ... -
JS实现的刮刮卡程序
2017-01-05 11:38 2839来源: 基于HTML5 Canvas的刮奖(刮刮卡)小控 ... -
Google插件
2016-06-29 11:56 1369Chrome插件下载 吐血推荐珍藏的Chrome插件 ... -
移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
2016-03-10 09:46 10887现在科技太发达,移动设备像素越来越高,随便一张照片2M+, ... -
使用megapixImage.js定位并展示上传的图片
2016-03-09 18:10 3532megapix-image插件 使用Canvas压缩图片上 ... -
基于jquery实现日历签到功能
2016-02-23 14:05 17647使用Jquery实现每日签到功能 基于jquery实现日 ... -
加载更多
2015-02-05 14:59 3390加载更多: 默认展示第一页数据,向下滑动加载第二页数据,依 ... -
Jquery表单验证插件–Validform
2015-02-05 11:44 20097Validform: Jquery表单验证插件–Valid ... -
EasyUI项目中的自定义JS
2014-07-09 17:15 4896自定义方法: (function($) { ... -
jquery.cookie.js使用介绍
2013-12-30 10:58 2335对cookies的操作在当访问一个网站就无时无刻的都伴随着我 ... -
Jquery打造可以上下移动行的表格
2013-05-06 16:05 3639current.insertBefore(prev); c ... -
[转]JQuery语法总结和注意事项
2011-12-03 13:09 17331、关于页面元素的引用 通过jquery的 $() ... -
jQuery的自动完成插件autocomplete
2011-05-17 14:17 13686autocomplete方法有两个参数,第一个用来填写URL地 ... -
$.ajax中dataType为html实现地区显示效果
2010-12-23 17:00 12105实现了选择第一个时,第二个才显示,并且显示的是对应的信息 ... -
Jquery中的验证jquery.validate.js
2010-12-06 20:03 3399默认验证信息是英文,要改成中文,需引入如下js:jquery. ... -
JQuery插件开发 + 插件
2010-11-03 20:31 2842jQuery插件库 jQuery插件 精品代码 WE ...
相关推荐
jQuery Multiple Select实现下拉框多选,请注意是Multiple 。实例介绍详细,想用的可以直接Copy进去用
jquery实现可多选下拉框 代码很简单,有基础的人一看即会,
一组经过美化的jQuery select下拉框单选和多选插件,带搜索功能,模拟select下拉框多选菜单选择效果。
jquery实现的多选下拉框ehynds-jquery-ui-multiselect-widget-1.10-3.zip
可以放到项目中用 mutiselect 下拉多选插件 可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo
jQuery下拉复选菜单,可实现多选全选功能,并提供下拉框内实时搜索
利用bootstrap配合jQuery实现select多选,全选全不选,界面美观大气
原生select实现多选功能
jquery+css+div 实现的模拟select多选 jquery+css+div 实现的模拟select多选
2.选中项的提示信息,如图中第2部分 selectedText 默认:# selected $("select").multiselect({ selectedText: 选中【#】项 ,总共【 #】项" }); 3.被选中的value值,如图第1部分显示的内容 $("select")....
无聊时自己随便写写的一个可以多选的下拉框,基于jquery1.6版本,下拉选项可以多选。有需要的可以下载看来看看。在ie8、火狐、谷歌、360极速上运行有效。其它浏览器未知=。=
多种样式实现下拉框多选,渐进渐出,分组选择,全选,全取消通通实现
select多选下拉列表+模糊查询功能,亲测完整,有ASP和HTML样例,代码完整。 <!DOCTYPE html> <title>Insert title here</title> <script src="jquery.min.js"> <script type="text/javascript" src="jquery....
jquery实现表格多选,单击颜色加深,再点击颜色还原,隔行换色,自己写的插件
jquery按关键词多选列表框选项
jquery 日期空间多选,多个日期逗号隔开jquery 日期空间多选,多个日期逗号隔开jquery 日期空间多选,多个日期逗号隔开jquery 日期空间多选,多个日期逗号隔开
jquery 实现下拉框多选方法 ,引入 easyui框架 ,支持IE7版本,360
一个带下拉模糊搜索的select,替换下拉内容后即可直接使用,只需要把对应文件放到指定文件夹中引用即可
jquery checkbox 选中 取消 checkbox多选
JQuery带checkbox多选的下拉列表,功能非常强大,浏览器兼容性也很强, 浏览器兼容性如下: IE 7+ Chrome 8+ Firefox 10+ Safari 3+ Opera 10.6+ 调用非常强大,扩展性也很强