博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
社交列表的添加【js、DOM】
阅读量:4647 次
发布时间:2019-06-09

本文共 1661 字,大约阅读时间需要 5 分钟。

追加子元素

1.新创建的元素追加进去

末尾

2.本身列表里的元素,追加进去

剪切

3.其他列表里的元素,追加进去

剪切

这个挺烦的,左右来回追加,石乐志才来写这个= =

<style>

select {
width: 100px;
height: 150px;
}
</style>

<body>

<select name="" id="left" multiple>

<option value="">四月是你的谎言</option>
<option value="">言叶之庭</option>
<option value="">你的名字</option>
<option value="">未闻花名</option>
<option value="">秒速五厘米</option>
<option value="">月色真美</option>

</select>

<input type="button" value=">>" id="btn1"/>

<input type="button" value="<<" id="btn2"/>
<input type="button" value=">" id="btn3"/>
<input type="button" value="<" id="btn4"/>

<select name="" id="right" multiple>

</select>

<script >
var left=document.getElementById("left");
var right=document.getElementById("right");

var allRight=document.getElementById("btn1");
var allLeft=document.getElementById("btn2");

 

var oneRight=document.getElementById("btn3");

var oneLeft=document.getElementById("btn4");

allRight.οnclick=function(){

for(var i =0 ; i<left.children.length; i++){

right.appendChild(left.children[i]);

i--;

}

}

allLeft.οnclick=function(){

for(var i = 0 ; i <right.children.length; i++){

left.appendChild(right.children[i]);

i--;

}

}

oneRight.οnclick=function(){

for(var i = 0 ; i<left.chidren.length; i++){

if(left.chidren[i].selected){

right.appendChild(left.children[i]);

i--;

}
}
}

oneLeft.οnclick=function(){

for(var i = 0 ; i<right.chidren.length; i++){

if(right.chidren[i].selected){

left.appendChild(right.children[i]);

i--;

}
}
}

//封装

allRight.οnclick=function(){

  end(left,right);

}

function end(a,b){ 

for(var i = 0 ; i<b.chidren.length; i++){

a.appendChild(b.children[i]);

i--;

}

</script>

</body>

 

转载于:https://www.cnblogs.com/yishichangan925/p/7485933.html

你可能感兴趣的文章
项目中非常有用并且常见的ES6语法
查看>>
[2017.02.23] Java8 函数式编程
查看>>
Knowledge Point 20180305 数据在计算机中的表示
查看>>
谈谈对web标准的理解
查看>>
58前端内推笔试2017(含答案)
查看>>
sprintf 和strcpy 的差别
查看>>
MPEG4与.mp4
查看>>
实验5
查看>>
git 下载 安装
查看>>
录制终端信息并回放
查看>>
JS中window.event事件使用详解
查看>>
ES6深入学习记录(一)class方法相关
查看>>
《BI项目笔记》用Excel2013连接和浏览OLAP多维数据集
查看>>
C语言对mysql数据库的操作
查看>>
SQL Server 数据库备份
查看>>
INNO SETUP 获得命令行参数
查看>>
Charles抓取https请求
查看>>
LAMP环境搭建
查看>>
C语言的变量的内存分配
查看>>
clientcontainerThrift Types
查看>>