JavaScript 三级联动代码

最新推荐文章于 2023-10-06 19:06:49 发布

chenyq234

最新推荐文章于 2023-10-06 19:06:49 发布

阅读量1.1k

点赞数

文章标签： restful http javascript

本文链接：https://blog.csdn.net/weixin_39422137/article/details/123766165

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        window.onload = function(){

            var countrys = [];
            countrys["中国"] = ["北京", "天津", "上海", "重庆"];
            countrys["美国"] = ["纽约", "洛杉矶", "华盛顿", "加州"];
            countrys["俄罗斯"] = ["莫斯科", "圣彼得堡", "伊尔库茨克", "叶卡捷琳堡"];

            var citys = [];
            citys["北京"] = ["海淀", "朝阳", "丰台", "东城区", "西城区"];
            citys["天津"] = ["滨海", "东丽", "西青", "北辰", "津南"];
            citys["上海"] = ["上海一区", "上海二区", "上海三区", "上海四区", "上海五区"];
            citys["重庆"] = ["重庆一区", "重庆二区", "重庆三区", "重庆四区", "重庆五区"];
            citys["纽约"] = ["一区", "二区", "三区", "四区", "五区"];
            citys["洛杉矶"] = ["一区", "二区", "三区", "四区", "五区"];
            citys["华盛顿"] = ["一区", "二区", "三区", "四区", "五区"];
            citys["加州"] = ["一区", "二区", "三区", "四区", "五区"];

            var ocountry = document.getElementById('country');
            var ocity = document.getElementById('city');
            var oarea = document.getElementById('area');

            // 添加国家
            for (country in countrys){
                ocountry.add(new Option(country, country));
                //alert(country)
            }
            // 添加城市
            ocountry.onchange = function(){
                ocity.length = 0;
                ocity.add(new Option("---请输入城市---", ""));
                country_value = ocountry.value;
                for (city_index in countrys[country_value]){
                    city = countrys[country_value][city_index]
                    ocity.add(new Option(city, city));
                }
            }
            // 添加区域
            ocity.onchange = function(){
                oarea.length = 0;
                oarea.add(new Option("---请输入区域---", ""));
                city_value = ocity.value;
                for (area_index in citys[city_value]){
                    area = citys[city_value][area_index]
                    oarea.add(new Option(area, area));
                }
            }
        }
    </script>



</head>
<body>

    <center>
        <br><br><br>
        <form id='form' method="post" action="">
            <select id="country" name="guojia">
                <option value="">---请输入国家---</option>
            </select><br><br>

            <select id="city" name="chengshi">
                <option value="">---请输入城市---</option>
            </select><br><br>

            <select id="area" name="chengshi">
                <option value="">---请输入区域---</option>
            </select><br><br>

            <input id="but" type="submit"  value="提交">
        </form>
    </center>

</body>
</html>