<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> select { width:200px; height: 200px; background-color: #33cccc; font-size: 20px; } </style> </head> <body> <select id="all" multiple="multiple"> <option>苹果</option> <option>橘子</option> <option>梨</option> <option>西瓜</option> <option>水蜜桃</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="select" multiple="multiple"> </select> <script src="common.js"></script> <script> var all = my$('all'); var select = my$('select'); all.children[0].onclick = function () { alert('hello'); } // 1 全部选择 my$('btn1').onclick = function () { // 先获取子元素的个数，将来再发生变化不会受影响 // 现在len的值始终是当前获取到的all.children.length 当前个数5 // var len = all.children.length; // for (var i = 0; i < len; i++) { // var option = all.children[0]; // select.appendChild(option); // } // // // 使用这种方式移动子元素的话，如果子元素有事件，移动之后元素的事件丢失 select.innerHTML = all.innerHTML; // 当我们是用innerHTML 清空子元素的时候 // 如果子元素有事件，此时会发生内存泄漏 all.innerHTML = ''; // 清空标签之间的内容 } // 3 移动选中的水果 my$('btn3').onclick = function () { // 找到所有选中的option var array = []; // 存储选中的option for (var i = 0; i < all.children.length; i++) { var option = all.children[i]; if (option.selected) { array.push(option); // 去掉当前option的选中效果 option.selected = false; } } // 把数组中的option移动到第二个select中 for (var i = 0; i < array.length; i++) { var option = array[i]; select.appendChild(option); } } </script> </body> </html>
common中的代码
function my$(id) { return document.getElementById(id); } // 处理浏览器兼容性 // 获取第一个子元素 function getFirstElementChild(element) { var node, nodes = element.childNodes, i = 0; while (node = nodes[i++]) { if (node.nodeType === 1) { return node; } } return null; } // 处理浏览器兼容性 // 获取下一个兄弟元素 function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; } // 处理innerText和textContent的兼容性问题 // 设置标签之间的内容 function setInnerText(element, content) { // 判断当前浏览器是否支持 innerText if (typeof element.innerText === 'string') { element.innerText = content; } else { element.textContent = content; } }