DOM操作和jQuery实现选项移动操作
DOM：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM选项移动操作</title>
<style>
select {
width: 100px;
height: 85px;
} div {
display: inline-block;
width: 50px
}
</style>
</head>
<body>
<select id="unsel" size="5" multiple><option>Argentina</option><option>Brazil</option><option>Canada</option><option>Chile</option><option>China</option><option>Cuba</option><option>Denmark</option><option>Egypt</option><option>France</option><option>Greece</option><option>Spain</option></select>
<div>
<button onclick="move(this.innerHTML)">>></button>
<button onclick="move(this.innerHTML)">></button>
<button onclick="move(this.innerHTML)"><</button>
<button onclick="move(this.innerHTML)"><<</button>
</div>
<select id="sel" size="5" multiple>
</select>
<script>
function $(id){
return document.getElementById(id);
}
var unsel=null;//保存所有备选国家列表
var sel=[];//保存已选中的国家列表
window.onload=function(){
unsel=$("unsel").innerHTML
.replace(/<\/?option>/g," ")
.match(/\b[a-zA-Z]+\b/g);
}
function move(inner){
switch (inner){
case ">>"://全部右移
sel=sel.concat(unsel);
unsel.length=0;
sel.sort();
break;
case "<<"://全部左移
unsel=unsel.concat(sel);
sel.length=0;
unsel.sort();
break;
case ">"://选中项右移
var opts=document.querySelectorAll("#unsel option");
//从后向前遍历每个option
for(var i=opts.length-1;i>=0;i--){
if(opts[i].selected){
//删除unsel中i位置的1个元素,直接压入sel
sel.push(unsel.splice(i,1)[0]);
}
}
sel.sort();
break;
case "<"://选中项左移
var opts=document.querySelectorAll("#sel option");
for(var i=opts.length-1;i>=0;i--){
if(opts[i].selected){
unsel.push(sel.splice(i,1)[0]);
}
}
unsel.sort();
break;
}
show();
}
function show(){//将两个数组，更新到select元素中
$("unsel").innerHTML="<option>"
+unsel.join("</option><option>")
+"</option>";
$("sel").innerHTML="<option>"
+sel.join("</option><option>")
+"</option>";
}
</script>
</body>
</html>
jquery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项移动操作</title>
<script src="jquery.min.js"></script>
<style>
select {
width: 100px;
height: 85px;
} div {
display: inline-block;
width: 50px
}
</style>
</head>
<body>
<select id="first" size="5" multiple>
<option>Argentina</option>
<option>Brazil</option>
<option>Canada</option>
<option>Chile</option>
<option>China</option>
<option>Cuba</option>
<option>Denmark</option>
<option>Egypt</option>
<option>France</option>
<option>Greece</option>
<option>Spain</option>
</select>
<div>
<button id="add">></button>
<button id="add_all">>></button>
<button id="remove"><</button>
<button id="remove_all"><<</button>
</div>
<select id="second" size="5" multiple>
</select> <script>
$("#add").click(function(){
// 将左边被选中的选项,移到右边去
$("#first>option:selected").appendTo($("#second"));
});
$("#add_all").click(function(){
$("#first>option").appendTo($("#second"));
});
$("#remove").click(function(){
$("#second>option:selected").appendTo($("#first"));
});
$("#remove_all").click(function(){
$("#second>option").appendTo($("#first"));
});
// 双击事件
$("#first").dblclick(function(){
$("#first>option:selected").appendTo($("#second"));
});
$("#second").dblclick(function(){
$("#second>option:selected").appendTo($("#first"));
});
</script>
</body>
</html>
DOM操作和jQuery实现选项移动操作的更多相关文章
- jQuery源码-dom操作之jQuery.fn.text
写在前面 jQuery.fn.text在jQuery是个使用频率比较高的接口,它的作用无非是设置/获取dom节点的内容文本,下文会通过几个简单的例子来说明.text()接口的使用,以及最后会对源码进行 ...
- jQuery源码-dom操作之jQuery.fn.html
写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...
- DOM操作在jQuery中的实用------文字提示和图片提示
关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- JQuery（选择器、事件、DOM操作）
一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...
- 使用JQuery进行DOM操作
获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元 ...
- 03-老马jQuery教程-DOM操作
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- DOM操作标签，事件绑定，jQuery框架
DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' 基本使用 动态创建一个标签 var 变 ...
- jQuery-1.9.1源码分析系列（十一） DOM操作
DOM操作包括append.prepend.before.after.replaceWith.appendTo.prependTo.insertBefore.insertAfter.replaceAl ...
随机推荐
- daD
Linux centos7环境下MySQL安装教程_Mysql_脚本之家 脚本之家 软件下载 android软件 MAC软件 驱动下载 字体下载 DLL下载 源码下载 asp源码 php源码 asp. ...
- Fiori Fundamentals和SAP UI5 Web Components
这周有位同事邀请我给团队讲一讲SAP技术的演进历史,所以我准备了下面几个主题来介绍. 其中SAP的技术回顾和演进,我的思路就是从前后台两方面分别介绍. 我画了一张非常简单的图: 去年5月我写过一篇文章 ...
- Python正则表达式(总)
转载请标明出处: http://www.cnblogs.com/why168888/p/6445044.html 本文出自:[Edwin博客园] Python正则表达式(总) search(patte ...
- Spring MVC面试整理
Spring MVC执行过程 客户端的请求提交到dispatcherServlet DispatcherServlet查询一个或者多个handlermapping ,找请求的Controller Di ...
- 在 Deepin 中搭建 GitLab
入职半个月了,一直在接受业务知识以及企业文化知识的培训,下周终于要开始上岗入手项目了.由于公司使用自己搭建的 GitLab 服务作为项目版本控制器,所以我决定学习一下 GitLab,由于这货跟 Git ...
- Jenkins获取编译状态
背景:在通过python的API调用Jenkins,启动Jenkins的job任务时,是需要知道Jenkins的编译状态,获取编译状态为 status=server.get_build_info(jo ...
- Maven经常使用命令
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/UP19910522/article/details/25985021 Maven库: http:// ...
- xgboost和gbdt区别
1. xgboost在目标函数中加入了正则化项,当正则化项为0时与传统的GDBT的目标函数相同2. xgboost在迭代优化的时候使用了目标函数的泰勒展开的二阶近似,paper中说能加快优化的过程!! ...
- Kubernetes 学习2 k8s基础概念
一.架构描述 1.基本架构 2.pod ,有两类 a.自主式pod 自我管理的,创建之后,任然是需要提交给API Server,API Server接受之后然后由调度器调度到指定的 node节点,由n ...
- linux命令使用总结
## linux 查看系统全部信息 uname -a ## linux 查看系统内核信息 uname -r ## linux 查看系统版本号信息 cat /etc/redhat-release ## ...