js_练习：下拉列表的操作

最新推荐文章于 2023-09-27 21:55:53 发布

跟着宝哥学java

最新推荐文章于 2023-09-27 21:55:53 发布

阅读量376

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/mtb278750/article/details/130593855

版权

4 下拉列表

繁琐写法

<html>
    <head>  
        <title>下拉列表练习</title>
        <meta charset="gbk"/>
        <style type="text/css">
            div{
                border:1px solid;
                padding:10px;
            }
            #div0{
                margin:50px auto;
                width:1600px;
                height:700px;
            }
            #div1left,#div1right{
                width:300px;
                height:200px;
                margin-top:50px;
            }
            #div1left{
                margin-left:300px;
                float:left;
            }
            #div1right{
                float:right;
                margin-right:300px;
            }
            #div2{
                clear:both;
                width:1200px;
                height:350px;
                margin:100px auto;
            }
            #div2 div{
                width:150px;
                height:300px;
                float:left;
                margin:20px 110px;
            }
            select{
                font-size:24px;
                font-weight:bold;
                color:blue;
            }
            #div2middle input{
                width:140px;
                height:50px;
                margin:11px auto;
                background-image:url("button.png");
            }
            #but_to_right{
                background-position:33% 3%;
            }
            #but_all_to_right{
                background-position:33% 28%;
            }
            #but_to_left{
                background-position:35% 55%;
            }
            #but_all_to_left{
                background-position:35% 86%;
            }
        </style>
    </head>
    <body> 
        <div id="div0">
            <div id="div1left">
            </div>
            <div id="div1right">
            </div>
            <div id="div2">
                <div id="div2left">
                    <select id="sel_left" size="8" multiple="true">
                        <option>选项0011</option>
                        <option>选项0012</option>
                        <option>选项0013</option>
                        <option>选项0014</option>
                        <option>选项0015</option>
                        <option>选项0016</option>
                        <option>选项0017</option>
                        <option>选项0018</option>
                    </select>
                </div>
                <div id="div2middle">
                    <input type="button" id="but_to_right"/>
                    <input type="button" id="but_all_to_right"/>
                    <input type="button" id="but_to_left"/>
                    <input type="button" id="but_all_to_left"/>
                </div>
                <div id="div2right">
                    <select id="sel_right" size="8" multiple="true">
                    </select>
                </div>
            </div>
        </div>
        <script  type="text/javascript">
            var oselLeft,oselRight;
            //文档加载成功 给按钮添加点击事件
            window.onload=function(){
                //给全局变量赋值
                oselLeft=document.getElementById("sel_left");
                oselRight=document.getElementById("sel_right");
                //给div设置文本内容
                setText();

                //给按钮添加点击事件
                document.getElementById("but_to_right").onclick=function(){
                    //左边被选中的到右边去
                    var collLeft=oselLeft.getElementsByTagName("option");
                    for(var i=0;i<collLeft.length;i++){
                        if(collLeft[i].selected){
                            //取消其选中状态
                            collLeft[i].selected=false;
                            oselRight.appendChild(collLeft[i]);
                            i--;
                        }
                    }
                    setText();
                }  

                document.getElementById("but_to_left").onclick=function(){
                    //右边被选中的到左边去
                    var collRight=oselRight.getElementsByTagName("option");
                    for(var i=0;i<collRight.length;i++){
                        if(collRight[i].selected){
                            //取消其选中状态
                            collRight[i].selected=false;
                            oselLeft.appendChild(collRight[i]);
                            i--;
                        }
                    }
                    setText();
                }  

                document.getElementById("but_all_to_right").onclick=function(){
                    //左边所有的到右边去
                    var collLeft=oselLeft.getElementsByTagName("option");
                    for(var i=0;i<collLeft.length;i++){
                        //取消其选中状态
                        collLeft[i].selected=false;
                        oselRight.appendChild(collLeft[i]);
                        i--;
                    }
                    setText();
                } 
                document.getElementById("but_all_to_left").onclick=function(){
                    //右边的都到左边去
                    var collRight=oselRight.getElementsByTagName("option");
                    for(var i=0;i<collRight.length;i++){
                        //取消其选中状态
                        collRight[i].selected=false;
                        oselLeft.appendChild(collRight[i]);
                        i--;
                    }
                    setText();
                }  				  
            }
            function setText(){
                //获取左边的所有的option的文本内容 写到div1left中
                var collLeft=oselLeft.getElementsByTagName("option");
                var collRight=oselRight.getElementsByTagName("option");
                var stextLeft="",stextRight="";
                for(var i=0;i<collLeft.length;i++){
                    stextLeft+=collLeft[i].innerText+" ";
                }
                for(var i=0;i<collRight.length;i++){
                    stextRight+=collRight[i].innerText+" ";
                }
                document.getElementById("div1left").innerHTML=stextLeft.bold().fontcolor("red");
                document.getElementById("div1right").innerHTML=stextRight.bold().fontcolor("blue");
            }
        </script>
    </body>
</html>

简便写法

<html>
    <head>  
        <title>下拉列表练习2</title>
        <meta charset="gbk"/>
        <style type="text/css">
            div{
                border:1px solid;
                padding:10px;
            }
            #div0{
                margin:50px auto;
                width:1600px;
                height:700px;
            }
            #div1left,#div1right{
                width:300px;
                height:200px;
                margin-top:50px;
            }
            #div1left{
                margin-left:300px;
                float:left;
            }
            #div1right{
                float:right;
                margin-right:300px;
            }
            #div2{
                clear:both;
                width:1200px;
                height:350px;
                margin:100px auto;
            }
            #div2 div{
                width:150px;
                height:300px;
                float:left;
                margin:20px 110px;
            }
            select{
                font-size:24px;
                font-weight:bold;
                color:blue;
            }
            #div2middle input{
                width:140px;
                height:50px;
                margin:11px auto;
                background-image:url("button.png");
            }
            #but_to_right{
                background-position:33% 3%;
            }
            #but_all_to_right{
                background-position:33% 28%;
            }
            #but_to_left{
                background-position:35% 55%;
            }
            #but_all_to_left{
                background-position:35% 86%;
            }
        </style>
    </head>
    <body> 
        <div id="div0">
            <div id="div1left">
            </div>
            <div id="div1right">
            </div>
            <div id="div2">
                <div id="div2left">
                    <select id="sel_left" size="8" multiple="true">
                        <option>选项0011</option>
                        <option>选项0012</option>
                        <option>选项0013</option>
                        <option>选项0014</option>
                        <option>选项0015</option>
                        <option>选项0016</option>
                        <option>选项0017</option>
                        <option>选项0018</option>
                    </select>
                </div>
                <div id="div2middle">
                    <input type="button" id="but_to_right"/>
                    <input type="button" id="but_all_to_right"/>
                    <input type="button" id="but_to_left"/>
                    <input type="button" id="but_all_to_left"/>
                </div>
                <div id="div2right">
                    <select id="sel_right" size="8" multiple="true">
                    </select>
                </div>
            </div>
        </div>
        <script  type="text/javascript">
            var oselLeft,oselRight;
            //文档加载成功 给按钮添加点击事件
            window.onload=function(){
                //给全局变量赋值
                oselLeft=document.getElementById("sel_left");
                oselRight=document.getElementById("sel_right");
                //给div设置文本内容
                setText();

                //给按钮添加点击事件
                document.getElementById("but_to_right").onclick=function(){
                    change(oselLeft,oselRight,false);
                }  

                document.getElementById("but_to_left").onclick=function(){
                    change(oselRight,oselLeft,false);
                }  

                document.getElementById("but_all_to_right").onclick=function(){
                    change(oselLeft,oselRight,true);
                } 
                document.getElementById("but_all_to_left").onclick=function(){
                    change(oselRight,oselLeft,true);
                }  				  
            }
            function setText(){
                //获取左边的所有的option的文本内容 写到div1left中
                var collLeft=oselLeft.getElementsByTagName("option");
                var collRight=oselRight.getElementsByTagName("option");
                var stextLeft="",stextRight="";
                for(var i=0;i<collLeft.length;i++){
                    stextLeft+=collLeft[i].innerText+" ";
                }
                for(var i=0;i<collRight.length;i++){
                    stextRight+=collRight[i].innerText+" ";
                }
                document.getElementById("div1left").innerHTML=stextLeft.bold().fontcolor("red");
                document.getElementById("div1right").innerHTML=stextRight.bold().fontcolor("blue");
            }
            function change(oselFrom,oselTo,b){
                var collOption=oselFrom.getElementsByTagName("option");
                for(var i=0;i<collOption.length;i++){
                    if(b||collOption[i].selected){
                        //取消其选中状态
                        collOption[i].selected=false;
                        oselTo.appendChild(collOption[i]);
                        i--;
                    }
                }
                setText();
            }
        </script>
    </body>
</html>