<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery双击事件</title>
<script type="text/javascript" src="scripts/jquery-1.11.3.js"></script>
<style type="text/css">
<!--
BODY
{
font-family:"Courier";
font-size: 12px;
margin:0px 0px 0px 0px;
overflow-x:no;
overflow-y:no;
background-color: #B8D3F4;
}
td
{
font-size:12px;
}
.default_input
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.default_input2
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.nowrite_input
{
border:1px solid #849EB5;
height:18px;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
}
.default_list
{
font-size:12px;
border:1px solid #849EB5;
}
.default_textarea
{
font-size:12px;
border:1px solid #849EB5;
}

.nowrite_textarea
{
border:1px solid #849EB5;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
}

.wordtd5 {
font-size: 12px;
text-align: center;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}

.wordtd {
font-size: 12px;
text-align: left;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd_1 {
font-size: 12px;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color:#fff;
}
.wordtd_2{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}
.wordtd_3{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}
.inputtd
{
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.inputtd2
{
text-align: center;
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.tablebg
{
font-size:12px;
}

.tb{
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
border-right-width:0px;
border-left-width:0px;
border-top-width:0px;
border-bottom-width:1px;}

.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}

.noborder {
border: none;
}

.button {
border: 1px ridge #ffffff;
line-height:18px;
height: 20px;
width: 45px;
padding-top: 0px;
background:#CBDAF7;
color:#000000;
font-size: 9pt;
font-family:"Courier";
}

.textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color:transparent;
text-align: left
}
-->
</style></head>

<body>

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" multiple="multiple" size=10 class="td3" id="first">
<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>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="&lt;--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
// 1 第一个按钮 - 将左边被选中的,移到右边去
$("#add").click(function(){
$("#first>option:selected").appendTo($("#second"));
});
// 2 将左边所有的option移到右边去
$("#add_all").click(function(){
$("#first>option").appendTo($("#second"));
});
$("#remove").click(function(){
$("#second>option:selected").appendTo($("#first"));
});
$("#remove_all").click(function(){
$("#second>option").appendTo($("#first"));
});
// 双击 ondbclick - dbclick()
// <select>元素的特点 - 事件绑定在select元素
$("#first").dblclick(function(){
$("#first>option:selected").appendTo($("#second"));
});
// 从右到左 原生DOM
// 1 获取右边的select元素
var second = document.getElementById("second");
second.ondblclick = function(){
// 2 根据select元素查找所有的option元素
var myoptions = second.getElementsByTagName("option");
// 3 遍历所有option
for(var i=0;i<myoptions.length;i++){
var myoption = myoptions[i];
if(myoption.selected){
//
}
}
}
</script>
</html>

爱卡（深圳）管理有限公司

分享每一刻精彩

微信：iCafeYOJOY

微博：http://weibo.com/iCafeYOJOY

官网：www.icafe.im

jquery双击事件的更多相关文章

  1. jQuery 双击事件（dblclick）时，不触发单击事件(click)

    我这是转载的文字 原文地址:http://www.cnblogs.com/wyblog/archive/2011/12/15/2289219.html 万恶的双击事件啊!! 在jQuery的事件绑定中 ...

  2. jQuery 双击事件(dblclick)

    在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click).即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那 ...

  3. [转]jQuery 双击事件（dblclick）时，不触发单击事件(click)

    例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教 ...

  4. jquery双击事件会触发单击事件

    实际工作中,我们经常会遇到在同一个元素上,绑定多种事件类型,比较常见的是单击事件和一些鼠标事件,一般而言影响不大.但是如果同时绑定单击事件和双击事件呢? 其实,只要能够想明白的话,解决方案也比较简单, ...

  5. JQuery如何实现双击事件时不触发单击事件，解决鼠标单双击冲突问题

    在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcli ...

  6. jquery 单击和双击事件冲突解决方案

    先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown ...

  7. jquery处理单击和双击事件

    今天做div点击时,需要用到同一div的单击和双击事件,出现问题如下 例子: Html <body> <div id="div_1">单击双击我</d ...

  8. JQuery如何实现双击事件时不触发单击事件

    单击和双击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown, ...

  9. Javascript和jquery事件--双击事件

    在js中和jq中对应的命名都为dblclick,ondblclick,但是ondblclick和dom元素的属性相似,可以在行内设置,也可以使用attr设置. 同时,双击事件需要关注一个问题,那就是双 ...

随机推荐

  1. 从excel文件中获取数据(2)

    本方法引用 Aspose.Cells.dll,ICSharpCode.SharpZipLib.dll ,NPOI.dll,NPOI.OOXML.dll,NPOI.OpenXml4Net.dll,NPO ...

  2. DBTest/1.TestWrite fails: MDB_BAD_TXN: Transaction cannot recover - it must be aborted

    今天,终于把这个困扰我好久的问题解决了.心累之余,分享给大家. 主要问题是编译caffe的时候报错了: [----------] 5 tests from DBTest/1, where TypePa ...

  3. 拦截JQuery的ajax

    (function() { var _ajax = $.ajax; $.ajax = function(opts) { //实现自己的逻辑 _ajax(opts); }; })();

  4. Spark+Hadoop问题小结

    1.spark执行./start-all.sh报"WARN Utils: Service 'sparkWorker' could not bind on port 0. Attempting ...

  5. 数组中第K小的数字（Google面试题）

    http://ac.jobdu.com/problem.php?pid=1534 题目1534:数组中第K小的数字 时间限制:2 秒 内存限制:128 兆 特殊判题:否 提交:1120 解决:208 ...

  6. DGV表头双行

    try { if (e.RowIndex < 0) { RectangleF _rect = e.CellBounds; Pen _pen = new Pen(Color.Black); Pen ...

  7. ng-style 的坑 - 对性能的影响

    本文地址:http://www.cnblogs.com/jying/p/5633203.html 熟悉 angular 的前端对ng-style 一定不陌生,这个家伙可以绑定一个函数,使得我们可以在函 ...

  8. 使用web图标

    http://www.lovelucy.info/demo/twitter-bootstrap-custom-icons/

  9. error-2016-1-18

    SSL 连接出错 错误: "System.Net.Mail.SmtpException"类型的未经处理的异常在 System.dll 中发生 其他信息: SMTP 服务器要求安全连 ...

  10. VS C#开发中WinForm中Setting.settings的作用

    .定义 在Settings.settings文件中定义配置字段.把作用范围定义为:User则运行时可更改,Applicatiion则运行时不可更改.可以使用数据网格视图,很方便: .读取配置值 tex ...