JavaScript代码实现选水果

来源：互联网发布：淘宝广场舞服装春装编辑：程序博客网时间：2024/04/30 23:55

选水果类似于我们在购物商城里进行简单选择。

包含一种或多种。然后把它放到类似购物车里去。

代码如下：

<!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>

阅读全文

0 0