js 中移動元素的方法


 
        
2017-12-13 19:59:24
 
        

 

 1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <select multiple="multiple" size="8" id="left_box">
        <option>水果</option>
        <option>橘子</option>
        <option>蘋果</option>
        <option>香蕉</option>
        <option>梨子</option>
        <option>鳳梨</option>
        <option>桃子</option>
        <option>櫻桃</option>
    </select>

    <select multiple="multiple" size="8" id="right_box">
        <option>購物車</option>
    </select>

    <input id="to_right" onclick="to_right()" value="添加" type="button">
    <input id="to_left" onclick="to_left()" value="取消" type="button">
    <script>
        var box_r=document.getElementById("right_box");  // 找到右邊盒子對象
        var box_l=document.getElementById("left_box");   // 找到左邊盒子對象
        var options=box_l.getElementsByTagName("option"); //找到左盒子下的所有option數組  (1)
        function to_right() {                            // 移動到右邊盒子方法

            for (var i=0;i<options.length;i++){
                var op=options[i];
                if(op.selected==true){                           //option有個屬性,如果選中就自動加入了selected屬性 所以通過這個邏輯來找出選中的option
                    box_r.appendChild(op);                       //appendChild方法不光是創建元素,還可以移動元素
                    i--;
                }
            }
        }
        function to_left() {                                   //移動到左邊盒子的方法
            var options=document.getElementById("right_box").getElementsByTagName("option"); //(2)
            for (i in options){                                              
                var op=options[i];
                if(op.selected==true){                       
                    box_l.appendChild(op);
                }
            }
        }
    </script>
</body>
</html>

  

注:代碼里用了2種循環的寫法,效果略有不同。標記的2處的options其實用左邊盒子和右邊效果一樣。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM