js中的三级联动

前提：需要一个拥有全部省份，市，区的js文件

 省份：<select name="" id="province">

        <!-- <option value=""></option> -->

    </select>

    市级：<select name="" id="city"></select>

    区级：<select name="" id="area"></select>

    <script>

        // 

        var pro = document.getElementById('province');

        var city = document.getElementById('city');

        var area = document.getElementById('area');

        // 1. 直接将省份的数据 遍历到下拉列表中

        // 获取data数组中的每一项数据(对象)

        for(var i = 0;i<data.length;i++){

            // console.log(data[i].n);

            // 1.2 创建对应数据的option

            var option = document.createElement('option');

            option.innerText = data[i].n;

            // 将每一项创建的option，赋值对应的省份 将option追加到pro中

            pro.appendChild(option);

        }

        // 将北京中的市级添加到city中

        var indexPro = pro.selectedIndex;

        console.log(data[indexPro]);

        // 获取到北京中所有的市级

        var dataCity = data[indexPro].c;

        for(var i = 0;i<dataCity.length;i++){

            // console.log(data[i].n);

            // 1.2 创建对应数据的option

            var option = document.createElement('option');

            option.innerText = dataCity[i].n;

            // 将每一项创建的option，赋值对应的省份 将option追加到pro中

            city.appendChild(option);

        }

        // console.log(data);

        // 当切换省份  市级跟着变换

        pro.onchange = function(){

            // 删除掉上一次省份的市级数据

            city.innerHTML = "";

            // 找到切换后的省份是谁

            var index = pro.selectedIndex;

            // console.log(index);

            // 获取当前对应省份的市级数据

            var dataCity = data[index].c;

            // console.log(dataCity);

            for(var i = 0;i<dataCity.length;i++){

                // console.log(data[i].n);

                // 1.2 创建对应数据的option

                var option = document.createElement('option');

                option.innerText = dataCity[i].n;

                // 将每一项创建的option，赋值对应的省份 将option追加到pro中

                city.appendChild(option);

            }

        }

        // 将北京中的区级添加到arae中

        var indexPro = city.selectedIndex;

        console.log(dataCity[indexPro]);

        // 获取到北京中所有的市级

        var dataArae = dataCity[indexPro].c;

        for(var i = 0;i<dataArae.length;i++){

            // console.log(data[i].n);

            // 1.2 创建对应数据的option

            var option = document.createElement('option');

            option.innerText = dataArae[i].n;

            // 将每一项创建的option，赋值对应的区份 将option追加到area中

            area.appendChild(option);

        }

        // 当切换省份  市级跟着变换

        city.onchange = function(){

            // 删除掉上一次市级的区级数据

            area.innerHTML = "";

            var index1 = pro.selectedIndex;

            // 获取当前对应省份的市级数据

            var dataCity = data[index1].c;

            // 找到切换后的市份是谁

            var index = city.selectedIndex;

            // console.log(index);

            // 获取当前对应市份的区级数据

            var dataArae = dataCity[index].c;

            // console.log(dataCity);

            for(var i = 0;i<dataArae.length;i++){

                // console.log(data[i].n);

                // 1.2 创建对应数据的option

                var option = document.createElement('option');

                option.innerText = dataArae[i].n;

                // 将每一项创建的option，赋值对应的省份 将option追加到pro中

                area.appendChild(option);

            }

        }

    </script>