JSDom——列表选中移动篇

最新推荐文章于 2024-08-01 15:12:32 发布

Vzr_Lou

最新推荐文章于 2024-08-01 15:12:32 发布

阅读量797

点赞数

分类专栏： JavaScript 文章标签： button function input xhtml html javascript

本文链接：https://blog.csdn.net/laughing_vzr/article/details/6266011

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个列表选中移动呢，灵感来自淘宝，在淘宝注册店铺的过程中，会涉及到选择分类，而其选择方式呢，就是如下效果：

选项移动

以下为具体的实现方式：

① HTML源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <span> <select id="left" multiple="multiple" style="width: 80px; height:120px; background:#CCC;"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> <input type="button" value="→" id="forR"/> <input type="button" value="More→" id="MforR"/> <input type="button" value="←"/ id="forL"> <input type="button" value="More←" id="MforL"/> <select id="right" multiple="multiple" style="width:80px; height:120px; background:#CCC;"> </select> </span> </body> <mce:script type="text/javascript" src="move.js" mce_src="move.js"></mce:script> </html>

网页中有六个元素：

4个按钮，两个select框

② JavaScript源码：

/*获得四个按钮的节点对象*/ var forR = document.getElementById("forR"); var MforR = document.getElementById("MforR"); var forL = document.getElementById("forL"); var MforL = document.getElementById("MforL"); /*单项左向右移动*/ forR.onclick = function (){ //获得两个select框元素节点 var left = document.getElementById("left"); var right = document.getElementById("right"); //获得所有选项元素 var loptions = left.options; //遍历所有选项对象 for(var i=0;i<loptions.length;i++){ var op = loptions[i]; //如果选项被选中则将该元素添加到右边的选择框中、也就是移动 if(op.selected){ right.appendChild(op); break; } } } /*多项左向右移动*/ MforR.onclick = function(){ //获得两个select框元素节点 var left = document.getElementById("left"); var right = document.getElementById("right"); //获得所有选项元素 var loptions = left.options; //遍历所有选项对象 for(var i=0;i<loptions.length;i++){ var op = loptions[i]; //如果选项被选中则将该元素添加到右边的选择框中、也就是移动 if(op.selected){ right.appendChild(op); i--; } } } /*单项右往左移动*/ forL.onclick = function (){ //获得两个select框元素节点 var left = document.getElementById("left"); var right = document.getElementById("right"); //获得所有选项元素 var roptions = right.options; //遍历所有选项对象 for(var i=0;i<roptions.length;i++){ var op = roptions[i]; //如果选项被选中则将该元素添加到右边的选择框中、也就是移动 if(op.selected){ left.appendChild(op); break; } } } /*多向右往左移动*/ MforL.onclick = function(){ //获得两个select框元素节点 var left = document.getElementById("left"); var right = document.getElementById("right"); //获得所有选项元素 var roptions = right.options; //遍历所有选项对象 for(var i=0;i<roptions.length;i++){ var op = roptions[i]; //如果选项被选中则将该元素添加到右边的选择框中、也就是移动 if(op.selected){ left.appendChild(op); i--; } } }

注意：

1.在以上的脚本代码中我们可以看到当单个元素移动时利用break结束了循环，这是为了保证每次即使多选也只移动一个元素，循环也就只执行一次

2.在多个选中项的移动中，当检测到选中元素并移走后select中元素减少，而检测元素的下标就会从移走的后的下标直接往后移动检测，

如果不进行减操作会导致每次都遗留一个元素，这并不符合我们的理想效果

从反向的移动中我们可以看到选项不会像以前正常排序，希望如果有想法的老牛们给些提示，希望大家在本文中可以学到写东西，共同交流。