网页元素交互实例-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangshengsky/article/details/72792551
<!DOCTYPE html>
<br lang="en" xmlns="http://www.w3.org/1999/html">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style type="text/css">
            </style>
        </head>
        <p>您喜欢那款浏览器</p>
        <input type="radio" name="broeser" onclick="check(this.value)" value="Internet Explorer">Internet Explorer<br />
        <input type="radio" name="broeser" onclick="check(this.value)" value="google">google<br />
        <input type="radio" name="broeser" onclick="check(this.value)" value="360">360安全浏览器<br />
        <input type="radio" name="broeser" onclick="check(this.value)" value="Mozilla Firefox">Mozilla Firefox<br /><br />
        您喜欢的浏览器是：<input type="text" style="width: 150px" id="loveInter" ><br /><br />
        <hr>









        请选择你喜欢的水果：</br>
        <select id="s01" multiple="multiple" size="10" style="width: 100px;height: 130px">
            <option>芒果</option>
            <option>苹果</option>
            <option>香蕉</option>
            <option>桔子</option>
            <option>牛奶</option>
        </select>

        <select id="sle02" multiple="multiple" size="10" style="width: 100px;height: 130px" >
            <option>芒果</option>
        </select>
<br />
<br />
        <input type="button" value="全部添加到右侧 >"  onclick="selAllRight();">
        <input type="button" value="< 全部添加到左侧" onclick="selAllLeft();">
<br />
<br />
        <input type="button" value="选中添加到右侧 >"  onclick = "selRight();" >
        <input type="button" value="< 选中添加到左侧" onclick="selLeft();">
        <script type="text/javascript">
            var sel1 = document.getElementById("s01");
            var sel2 = document.getElementById("sle02");
            var op1s = sel1.getElementsByTagName("option");
            var op2s = sel2.getElementsByTagName("option");

            function selAllRight() {
                for (var i = 0 ;i < op1s.length;i++){
                     var op = op1s[i];
                         sel2.appendChild(op);
                         i--;
                }
           }

           function selAllLeft() {
               for (var i = 0 ;i < op2s.length;i++){
                    var op = op2s[i];
                    sel1.appendChild(op);
                    i--;
               }
           }

           function  selRight() {
               for (var i = 0 ;i < op1s.length;i++){
                   var op = op1s[i];
                   if (op.selected == true){
                       sel2.appendChild(op);
                       i--;
                   }
               }
           }
            
            function  selLeft() {
                for (var i = 0 ;i < op2s.length;i++){
                    var op = op2s[i];
                    if (op.selected == true){
                        sel1.appendChild(op);
                        i--;
                    }
                }
            }
//==================================================================================
            function check(brown) {
                document.getElementById("loveInter").value=brown;
            }


        </script>
        </body>
</html>