select不支持双击dbclick事件

所属分类：网页制作 / HTML/Xhtml 阅读数： 615

收藏 0赞 0分享

XML/HTML Code复制内容到剪贴板

<div class="centent" style="width:200px; float:left; margin-right:20px;">
<select multiple="multiple" id="select1" style="width:150px; 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>
</select>
<div>
<span id="add" style="display:block; width:140px; cursor:pointer;">选中添加到右边>></span>
<span id="addAll" style="display:block; width:140px; cursor:pointer;">全部添加到右边>></span>
</div></div>
<div class="centent" style="width:200px; float:left; margin-right:20px;">
<select multiple="multiple" id="select2" style="width:150px; height:160px;">
</select>
<div>
<span id="add1" style="display:block; width:140px; cursor:pointer;"><<选中删除到左边</span>
<span id="addAll1" style="display:block; width:170px; cursor:pointer;"><<全部选中删除到左边</span>
</div>
</div>

JavaScript Code复制内容到剪贴板

<script type="text/javascript">
//下拉框多选的应用 9：57
$(function(){
//开始把左边的添加到右边
$("#add").click(function(){ //把选中的添加到右边
$option = $("#select1 option:selected");
$option.appendTo("#select2");
})
$("#addAll").click(function(){ //全部添加到右边
$option = $("#select1 option");
$option.appendTo("#select2");
})
$("#select1").dbclick(function(){ //双击添加到右边
$option = $("#select1 option:selected",this);
$option.appendTo("#select2");
})
//开始右边的添加到左边
$("#add1").click(function(){ //把选中的添加到左边
$option = $("#select2 option:selected");
$option.appendTo("#select1");
})
$("#addAll1").click(function(){ //全部添加到左边
$option = $("#select2 option");
$option.appendTo("#select1");
})
$("#select2").dbclick(function(){ //双击添加到左边
$option = $("option:selected",this);
$option.appendTo("#select1");
})
})
</script>

更多精彩内容其他人还在看

网页注释在IE中产生文字溢出

实验代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

收藏 0赞 0分享

HTML教程:定义列表

原文：http://andymao.com/andy/post/104.html 上一节：有序列表写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什

收藏 0赞 0分享

HTML教程:有序列表

原文：http://andymao.com/andy/post/103.html 上一节：无序列表信息有时候是无序归纳的，有的却有着明确的顺序，在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的：操作步骤、排行榜、书目录……

收藏 0赞 0分享

HTML教程:无序列表

原文：http://andymao.com/andy/post/102.html 段落已经讲完了，那么一些基本的应用方式也讲了一些，那么是否已经应用了呢？当然应用可以更为丰富，那么这些就需要自己在实际工作中不断的摸索与思考，然后创新并总结得出新的应用形式。当然了段落不能当作

收藏 0赞 0分享

HTML网页制作的强大8条技巧

　　虽然现在有许多网页制作工具能让您轻松地完成工作，但如果使用HTML则可以得到更大控制权，下面介绍几个小技巧。　　1。使用<tt>，<i>，<br>语句来控制文字排版比用<pre>好得多。如: <tt>实用

收藏 0赞 0分享

网页表格分割线去除方法

网页表格分割线去除方法。其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这

收藏 0赞 0分享

blockquote标记应用注意

关于语义化，不是一句两句就能说明白的，而且现在也没有一个官方的很严格的定义。关于<blockquote>没有争议的是： 1.引用一段较长的文字 2.可以使用cite标签或者属性问题是<blockquote>引用的文字必须使用块级元素将他

收藏 0赞 0分享

网页表格表框制作技巧

网页表格表框制作技巧。 -------------------------------------------------------------------------------- 表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不

收藏 0赞 0分享

HTML其实就是学习几个重要标记的应用

《这将是一场革命》一文出来以后。得到业界大伙的认同，当然与此同时也得到部分来自内部与外部的挑衅，不过的更加多的是更多人来寻问每一个点的细节。今晚回家很早就睡了，半夜在一个梦中醒来，梦里正在和小学的同学玩一个游戏——“The Next&rdquo

收藏 0赞 0分享

移动端专用的meta标签设置大全

不知道有没有人觉得，html的meta标签描述的头部信息特别多，下面这篇文章主要给大家分享介绍了关于移动端专用的meta设置的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧

收藏 0赞 0分享

select不支持双击dbclick事件

网页注释在IE中产生文字溢出

HTML教程:定义列表

HTML教程:有序列表

HTML教程:无序列表

HTML网页制作的强大8条技巧

网页表格分割线去除方法

blockquote标记应用注意

网页表格表框制作技巧

HTML其实就是学习几个重要标记的应用

移动端专用的meta标签设置大全

网络赚钱

站长故事