JavaScript代码实现选水果

逃离我推掉我的手 2022-06-07 02:43 162阅读 0赞

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

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

代码如下：

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