列表选择

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值