select不支持双击dbclick事件_HTML/Xhtml_网页制作
程序员文章站
2022-03-31 08:20:36
...
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">选项1option>
- option value="2">选项2option>
- option value="3">选项3option>
- option value="4">选项4option>
- option value="5">选项5option>
- 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复制内容到剪贴板
- >
- //下拉框多选的应用 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");
- })
- })
推荐阅读
-
设置disabled属性后台读不到数据如何让select支持readonly_HTML/Xhtml_网页制作
-
浅析html input 等值改变添加监听事件_HTML/Xhtml_网页制作
-
a标签href属性和onclick事件的比较介绍_HTML/Xhtml_网页制作
-
使select在选中/聚焦时列出所有选项目前比较好的处理方式_HTML/Xhtml_网页制作
-
Web页面 自定义选择框Select_HTML/Xhtml_网页制作
-
html中select optgroup标签使用介绍_HTML/Xhtml_网页制作
-
select的最佳预设打造全兼容各浏览器select_HTML/Xhtml_网页制作
-
Html Select option 如何进行默认选择_HTML/Xhtml_网页制作
-
使select在选中/聚焦时列出所有选项目前比较好的处理方式_HTML/Xhtml_网页制作
-
HTML select option基础理解及使用 _HTML/Xhtml_网页制作