前端學習筆記day13 動態建立元素例項--多選移動 全部移動
阿新 • • 發佈：2018-12-30
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> select { width: 300px; height: 200px; background-color: pink; text-align:center; line-height: 50px; font-size: 18px; margin-top: 200px; } </style> <script src="common.js"></script> </head> <body> <select id='left' multiple='multiple'> <option value="1">小明</option> <option value="2">小花</option> <option value="3">小麗</option> <option value="4">小強</option> <option value="5">小紅</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 id='right' multiple='multiple'></select> <script> var left = document.getElementById('left'); var right = document.getElementById('right'); var btn1 = document.getElementById('btn1'); btn1.onclick = function() { var leftLen = left.children.length; for (var i = 0;i < leftLen;i++) { right.appendChild(left.children[0]); right.children[i].selected = false; } } var rightArr = []; var btn2= document.getElementById('btn2'); btn2.onclick = function() { for (var i = 0;i < right.children.length;i++) { rightArr.push(right.children[i]); } for (var i = 0;i < rightArr.length;i++) { left.appendChild(rightArr[i]); left.children[i].selected = false; } rightArr = []; } var leftArr = []; var btn3 = document.getElementById('btn3'); btn3.onclick = function() { for (var i = 0;i < left.children.length;i++) { if (left.children[i].selected) { leftArr.push(left.children[i]) } } for (var i = 0;i < leftArr.length;i++) { right.appendChild(leftArr[i]); right.children[i].selected = false; } leftArr = []; } rightArr = []; var btn4 = document.getElementById('btn4'); btn4.onclick = function() { for (var i = 0;i < right.children.length;i++) { if (right.children[i].selected) { rightArr.push(right.children[i]) } } for (var i = 0;i < rightArr.length;i++) { left.appendChild(rightArr[i]); left.children[i].selected = false; } rightArr = []; } </script> </body> </html>
執行結果：
