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 ...
随机推荐
- Linux telnet命令详解
telnet命令通常用来远程登录.telnet程序是基于TELNET协议的远程登录客户端程序.Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.它为用户 ...
- oracle给用户分配特定用户下特定表的只读权限
以下是测试过程,测试环境oracle 11.2.0.3 linux平台: 模拟将HR用户下的employees表的只读权限非配给test_ycr创建用户:SQL> create user tes ...
- php中的雷同方法
php中又很多的可选语法,比如echo 使用echo()和print()都可以输出文本,他们的不同之处在于print()函数有一个返回值1代表输出成功,0代表输出失败,二echo()就没有返回值了. ...
- Linux中从oracle官网下载jdk文件不是标准的gzip格式文件问题
首先你要知道,在linux系统中,文件类型跟后缀名无关,后缀名只是为了方便识别,所以你下载的压缩包可能是tar.gz格式的,也有可能是tar.bz2或tar.xz格式,因为可能别人压缩之后不小心改错了 ...
- UIView 中 hidden、alpha、clear color 与 opaque 的区别
透明度与图层混合相关,影响到图片绘制的效率. hidden 此属性为 BOOL 值,用来表示 UIView 是否隐藏.关于隐藏大家都知道就是让 UIView 不显示而已,但是需要注意的是: 当前 UI ...
- shuf 按行打乱文本命令
长选项必须使用的参数对于短选项时也是必需使用的. -e, --echo 将每个参数视为输入行 -i, --input-range=LO-HI 将LO 到HI 的每个数字视为输入行 -n, --head ...
- 【[HNOI2010]弹飞绵羊】
发现好像写了一个洛谷上最快的分块 这道题曾经一度感觉非常不可做,因为\(LCT\)的标签以及没有什么思路的分块 但是自从\(yy\)出来一个错误的哈希冲突分块之后(修改的时候挂掉了),就发现这道题不就 ...
- hctf2016_302跳转绕csp---总结
页面目录如下: register.php注册页面. user.php可发送消息给其他用户. profile.php可配置参数添加用户头像(加载eval js文件). static存在redirect. ...
- 五子棋项目总结 JavaScript+jQuery（插件写法）+bootstrap（模态框）
Html部分(界面): 1.五子棋棋盘由canvas完成: 2.两个按钮,样式由bootstrap完成: 3.菜单按钮对应的模态框,可以选择游戏模式:玩家自由对战,和电脑对战,还可以指定谁先执子和哪个 ...
- 小米root
ROOT之前,需要做几个准备工作: 首先,你需要去MIUI官网解锁,解锁教程见MIUI官网(百度搜索 MIUI解锁,第一个就是),然后根据官方指导进行解锁: 然后,因为MAX2的ROOT是卡刷,所以解 ...