全面解析DOM操作和jQuery实现选项移动操作代码分享

DOM：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>DOM选项移动操作</title>
<style>
select {
width: px;
height: px;
}
div {
display: inline-block;
width: px
}
</style>
</head>
<body>
<select id="unsel" size="" 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="" 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=;
sel.sort();
break;
case "<<"://全部左移
unsel=unsel.concat(sel);
sel.length=;
unsel.sort();
break;
case ">"://选中项右移
var opts=document.querySelectorAll("#unsel option");
//从后向前遍历每个option
for(var i=opts.length-;i>=;i--){
if(opts[i].selected){
//删除unsel中i位置的个元素,直接压入sel
sel.push(unsel.splice(i,)[]);
}
}
sel.sort();
break;
case "<"://选中项左移
var opts=document.querySelectorAll("#sel option");
for(var i=opts.length-;i>=;i--){
if(opts[i].selected){
unsel.push(sel.splice(i,)[]);
}
}
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-">
<title>选项移动操作</title>
<script src="jquery.min.js"></script>
<style>
select {
width: px;
height: px;
}
div {
display: inline-block;
width: px
}
</style>
</head>
<body>
<select id="first" size="" 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="" 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实现选项移动操作代码分享的全部内容，希望对大家有所帮助！

赞 (0)

相关推荐

  • 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

  • jQuery原理系列-常用Dom操作详解

    1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply修正this 的指向. if (element.addEventListener) { element.addEventListener(type, handler, useCapture); } else { if (element.attachEvent) { element.attachEve

  • jquery对dom节点的操作【推荐】

    1.JavaScript脚本放在哪里才好? 1.当有些函数 需调用才执行或者有些事件需触发才执行的脚本,我们可以将脚本放在HTML的head部分中,这样可以保证脚本在任何调用之前已经被加载. 2.当页面加载时 需执行的脚本可以放在HTML的body部分,这类脚本通常被用来生成页面的内容. 3.当页面加载后 需立即执行的脚本,我们可以放在最后,文档加载之后执行.所幸的是,Jquery有事件控制,所以,这部分我们可以下载 head 引用的外部文件中. 2.jquery的常用函数 如:children

  • 浅谈jQuery 选择器和dom操作

    浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1)."$("#id")",获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2)."$(".class")",获取class指定的元素,不同的元素可以具有相同的class属性

  • jQuery基础知识点总结(DOM操作)

    使用jQuery的方式来操作DOM更加的简洁.方便,统一的调用方式方便学习并且可降低学习成本. 1.样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css("color", "red"); ②设置多个样式(也可以设置单个) // 参数为 {}(对象) $(selector).css({"color": "red", "

  • jQuery 中的 DOM 操作

    jQuery 中的 DOM 操作

    DOM(Document Object Model-文档对象模型):一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript和 DOM 为 HTML文件编写脚本时, 有许多专属于 HT

  • 全面解析DOM操作和jQuery实现选项移动操作代码分享

    DOM: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>DOM选项移动操作</title> <style> select { width: px; height: px; } div { display: inline-block; width: px } </style> <

  • jQuery+HTML5加入购物车代码分享

    jQuery+HTML5加入购物车代码分享

    这是一款基于jquery+html5实现的支持累加计价的网站购物车代码,可以把货物添加到购物车,添加物品数量,如果想取消购置某物品,这个功能也是可以实现的. 运行效果图:-----------------------------------查看效果----------------------------------- 为大家分享的jQuery+HTML5加入购物车代码如下 <head lang="en"> <meta charset="UTF-8"

  • javascript生成/解析dom的CDATA类型的字段的代码

    两段demo代码如下(for ie only): <script type="text/javascript">   //demo1 var  xmlDoc  =  new  ActiveXObject("Msxml2.DOMDocument");   var  root;   var  CDATASection;   xmlDoc.async  =  false;   xmlDoc.loadXML("<a/>");  

  • 使用jQuery实现星级评分代码分享

    前面有一篇原生js实现星级评分 .可能覆盖面不是很广,现在给出一个jquery实现的星级评分. 复制代码 代码如下: <div class="star">  <span>jQuery星级评论打分</span>  <ul>  <li><a href="javascript:;">1</a></li>  <li><a href="javascrip

  • jquery图片滚动放大代码分享（2）

    jquery图片滚动放大代码分享（2）

    本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,像是一个放大镜,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:                 -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-eq

  • jquery制作弹窗提示窗口代码分享

    复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><!--[if IE 6]><script type="text/javascript" src="js/iepngfix_tilebg.js"></script><![endif]--><s

  • jquery图片滚动放大代码分享（1）

    jquery图片滚动放大代码分享（1）

    本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,带有左右箭头,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:        ----------------------查看效果下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-e

  • jquery+html5时钟特效代码分享（可设置闹钟并且语音提醒）

    jquery+html5时钟特效代码分享（可设置闹钟并且语音提醒）

    本文实例讲述了Jquery+html5可设置闹钟并且会语音提醒的时钟特效.分享给大家供大家参考.具体如下: 这是一款基于Jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码,超逼真的模拟时钟,最大的特点还可以语音提醒,感兴趣的小伙伴们快来研究研究. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的Jquery+html5实现可设置闹钟并且会语音提醒的时钟

  • Jquery-1.9.1源码分析系列（十一）之DOM操作

    DOM操作包括append.prepend.before.after.replaceWith.appendTo.prependTo.insertBefore.insertAfter.replaceAll.其核心处理函数是domManip. DOM操作函数中后五种方法使用的依然是前面五种方法,源码 jQuery.each({ appendTo: "append", prependTo: "prepend", insertBefore: "before&quo

随机推荐