选水果类似于我们在购物商城里进行简单选择。
包含一种或多种。然后把它放到类似购物车里去。
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> select { width: 150px; height: 200px; background-color: #0099cc; } </style> </head> <body> <select id="all" size="10" 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" size="10" multiple="multiple"> </select> <script> function $(id) { return document.getElementById(id); } $("btn1").onclick = function() { // 全部右移 思路遍历左边所有的孩子 一一加到右边 var lChilds = $("all").children; for(var i=lChilds.length-1; i>=0; i--) { $("select").appendChild(lChilds[i]); } } $("btn2").onclick = function() { // 全部右移 思路遍历右边所有的孩子 一一加到左边 var rChilds = $("select").children; for(var i=rChilds.length-1; i>=0; i--) { $("all").appendChild(rChilds[i]); } } $("btn3").onclick = function() { // 选中右移 var lChilds = $("all").children; /* for(var i=0; i<lChilds.length; i++) { if(lChilds[i].selected) { $("select").appendChild(lChilds[i]); i--; } }*/ for(var i=lChilds.length -1; i>=0; i--) { if(lChilds[i].selected) { $("select").appendChild(lChilds[i]); } } /* i=0 i<5 iChilds[0] 右边加了苹果 现在左边剩4个水果 [香蕉 西瓜 牛 西红柿] i=1 1<4 iChilds[1] 西瓜 ... */ } </script> </body> </html>