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 ...
随机推荐
- Http扫盲
https://www.kancloud.cn/kancloud/tealeaf-http/43832
- SpringMvc学习---基础知识考核
SpringMVC 1.SpringMVC的工作流程 流程 : 1.用户发送请求至前端控制器DispatcherServlet2.DispatcherServlet收到请求调用HandlerMappi ...
- Nginx学习---企业级nginx环境搭建
1.1. nginx安装环境 1.系统要求 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. 1-1 安装 GCC 源码安装nginx需要依赖gcc环境,需要 ...
- 如何让4年前的电脑装win10开机跑进15秒
我是用我的电脑测试的.看看我电脑的配置 我的是windows10,机械硬盘. 在这里要说的是给电脑优化,让其开机更快.当然,因电脑配置而异,我的最快是11秒.标题可能有点夸张了,结果因电脑配置而异,高 ...
- Permission Denial: opening provider 隐藏的android:exported属性的含义
Permission Denial: opening provider 隐藏的android:exported属性的含义 2013-03-07 13:17 227人阅读 评论(0) 收藏 举报 场景: ...
- C++课堂作业(1)
github链接: https://github.com/deepYY/object-oriented/tree/master/Circle 作业题目 Create a program that as ...
- navicat连接PostgreSQL报：column “rolcatupdate” does not exist ...错误的解决办法
avicat premium 连接PostgreSQL出现: column “rolcatupdate” does not exist ... 错误如图: 解决方案: 看看你的navicat 是否为最 ...
- phonegap 启动背景设置
1.拷贝一张图片到Android项目的res目录的drawable-mdpi目录下 2.在主要的src下的java文件中编写代码 package com.study.hellomobileword1; ...
- 带参sql$和#的区别（注解）
主要区别就是#带双引号,$不带 例如:#{id}代表'id',${id}代表id 下面是Mybatis @Select注解方式的sql @Select("select id,name fro ...
- 问题：一球从某高度自由落下，每次落地后反跳回原高度的一半；再落下，求它在第n次落地时，共经过多少米？第n次反弹多高？
import java.util.Scanner; //题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? public c ...