下拉列表级联

作者: 高正杰 | 来源:发表于2017-12-24 14:46 被阅读8次
    <script type="text/javascript">  
        function selcity(){  
            var arr = [["--选择城市--"],["海定区","东城区","西城区","朝阳区"],["济南","青岛","日照","威海"],  
                       ["长沙","郴州","岳阳","株洲"],["广州","深圳","惠州","东莞"]];  
            var index = document.getElementById("selID").selectedIndex;  
            var subNode = document.getElementById("subID");  
            var citys = arr[index];        
              
            subNode.options.length = 0;   //清空之前选项  
            for(var x=0;x<citys.length;x++){  
                var optNode = document.createElement("option");  
                optNode.innerText = citys[x];  
                subNode.appendChild(optNode);  //选择添加到子选项中  
            }  
        }  
    </script>  
    <style type="text/css">   
          
    </style>  
    </head>  
    <body>  
        <select id="selID" onchange="selcity()">  
            <option>--选择省市--</option>  
            <option>北京</option>  
            <option>山东</option>  
            <option>湖南</option>  
            <option>广东</option>  
        </select>  
          
        <select id="subID">  
            <option>--选择城市--</option>  
        </select>  
    </body>
    


    该文章于2017年8月7日于CSDN上首次发表,2017年12月24日搬家至此!

    相关文章

      网友评论

        本文标题:下拉列表级联

        本文链接:https://www.haomeiwen.com/subject/wukhgxtx.html