两个select来回联动
2016-12-29 08:18
183 查看
在两个select中来回切换option的实现
0.HTML
1.双击切换:注意要用动态生成用on事件绑定!
2.按钮切换:可以多选
3.option排序:每一次切换都重新排序
0.HTML
<select multiple="multiple" id="sel1"> <option value="1">ABC</option> <option value="2">DEF</option> <option value="3">GHI</option> <option value="4">LMN</option> <option value="5">OPQ</option> </select> <!--另一个select类似-->
1.双击切换:注意要用动态生成用on事件绑定!
$("#sel1").on("dblclick","option", function () { $("#sel2").append($(this)); // apend会移动到目标父元素上 selSort(2); }); $("#sel2").on("dblclick","option", function () { $("#sel1").append($(this)); selSort(1); });
2.按钮切换:可以多选
$("#btnAdd").click(function () //单击 “加入”后 { var isSelected = $("#sel1>option:selected"); // //console.log(isSelected); $("#sel2").append(isSelected); selSort(2); }); //“删除”类似
3.option排序:每一次切换都重新排序
function selSort(i) { $("#sel" + i + ">option").sort(function (a, b) { var aText = $(a).text().toUpperCase(); var bText = $(b).text().toUpperCase(); if (aText > bText) return 1; if (aText < bText) return -1; //console.log(aText,bText); //return 0; }).appendTo("#sel" + i); }
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 只需四个步骤几行代码,即可快速实现直播弹幕功能
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- JavaScript 基础、进阶以及 Ubuntu 系统中的 JavaScript 开发调试工具
- html5 web数据存储
- 最后一次说说闭包
- Ajax
- SEO
- HTML5调用摄像头实例
- 2019年开发人员应该学习的8个JavaScript框架
- Powershell 创建炫丽美观的Html报表
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用