JavaScript实现二级联动

最新推荐文章于 2023-05-27 23:48:40 发布

fusheng-fate

最新推荐文章于 2023-05-27 23:48:40 发布

阅读量166

点赞数

分类专栏：笔记文章标签： js 二级联动

本文链接：https://blog.csdn.net/lgb1997/article/details/99698010

版权

笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

javascript实现省市、区二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        select{
            width: 100px;
            height:20px;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body onload="getProvice()" onload="getCity()">
        省份<select id="pro" onchange="getCity()"></select>
        城市、区<select id="cit"></select>
        <script>
            var provice=[["---请选择---"],"河南","江苏","北京"];
            var city=[[],["南阳","信阳","平顶山","郑州"],["苏州","宿迁","常州","镇江"],["东城区","西城区","朝阳区","昌平区"]];
            //alert(provice[1]);
            function getProvice(){
                    str="";
                for(i=0;i<provice.length;i++){
                    str=str+"<option>"+provice[i]+"</option>";
                }
                document.getElementById("pro").innerHTML=str;
            }
           function getCity(){
              var index = document.getElementById("pro").selectedIndex;
                    str="";
                for(i=0;i<city[index].length;i++){
                    str=str+"<option>"+city[index][i]+"</option>";
                }
                document.getElementById("cit").innerHTML=str;
            }
        </script>
</body>
</html>

fusheng-fate

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现二级联动

javascript实现省市、区二级联动<!DOCTYPE html><html lang="en"><head> <style> select{ width: 100px; height:20px; } </style> ...
复制链接

扫一扫