select不支持双击dbclick事件_编程技术网-程序员技术内容聚合平台

程序员

select不支持双击dbclick事件

作者：admin 2021-05-08 我要评论

XML/HTML Code 复制内容到剪贴板 div class = centent style = width:200px;float:left;margin-right:20px; select multiple = multiple id = select1 style = w...

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

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>

原文链接：https://m.jb51.net/web/195155.html

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章

“鸿蒙设备开发”选“址” -->
Nextcloud是如何成为终极开源生产力套
手把手教你用Pycharm连接远程Python环
Windows 10X镜像生成工具发布：任意PC

腾讯云代理商

精彩导读

Spring boot 使用mysql实例详解

PHP标准库 (SPL)——Countable用法示例

R语言作图：如何在数据可视化过程中调

Unity3D FPS Game（第一人称射击游戏）

源代码从 300 行到 172,000 行，它用了

AmazeUI 单选框和多选框的实现示例

海外云服务器

热门资讯

腾讯云代理商