【HTML+CSS+JavaScript】实现地址选择联动

需求：实现地址选择联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地址联动</title>
    <style>
        select {
            width: 100px;
            padding: 5px;
            font-size:16px;
        }
    </style>
</head>
<body>
    <h1>选择地址</h1>
    <hr>
    <select id="prov"></select>
    <select id="city"></select>

    <script>
        //定义省市的信息
        var provList = ['江苏','浙江','福建','湖南'];
        var cityList = [];
        cityList[0] = ['南京', '苏州', '宿迁', '扬州'];
        cityList[1] = ['杭州', '温州', '宁波', '台州'];
        cityList[2] = ['福州', '厦门', '泉州', '漳州'];
        cityList[3] = ['长沙', '湘潭', '株洲', '湘西'];

        //获取select元素
        var provSelect = document.querySelector('#prov');
        var citySelect = document.querySelector('#city');


        //把省的信息 添加到第一个select元素中
        provList.forEach(function(val, index){
            //DOM操作  了解
            provSelect.add(new Option(val, index))
        });


        //给第一个select绑定change事件
        provSelect.onchange = function(){
            //获取 当前的选项
            var index = this.value;

            //清空第二个select原先内容
            citySelect.length = 0;

            //选择对应的城市列表，添加到第二个select
            cityList[index].forEach(function(val, index){
                citySelect.add(new Option(val, index));
            })
        }


        //手工触发一次 change事件
        provSelect.onchange();

    </script>
</body>
</html>

 

posted @ 2018-08-14 16:22  NeymarGoal  阅读(3542)  评论(1)  编辑  收藏  举报