javascript - 动手写一个js 省市联动插件-PHP中文网问答

黄舟2017-04-11 12:42:51 4楼
你的模拟数据是有省市县三级数据的，所以，我加了一个“县”的层级，示例代码如下，直接把代码保存成文件即可查看联动效果：
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    省：<select name="" id="province"></select>
    市：<select name="" id="city"></select>
    县：<select name="" id="county"></select>
    <script>
        var cityData3 = [{
            value: '110000',
            text: '北京市',
            children: [{
                value: "110101",
                text: "北京市",
                children: [{
                    value: "110101",
                    text: "东城区"
                }, {
                    value: "110102",
                    text: "西城区"
                }, {
                    value: "110103",
                    text: "崇文区"
                }, {
                    value: "110104",
                    text: "宣武区"
                }, {
                    value: "110105",
                    text: "朝阳区"
                }, {
                    value: "110106",
                    text: "丰台区"
                }, {
                    value: "110107",
                    text: "石景山区"
                }, {
                    value: "110108",
                    text: "海淀区"
                }, {
                    value: "110109",
                    text: "门头沟区"
                }, {
                    value: "110111",
                    text: "房山区"
                }, {
                    value: "110112",
                    text: "通州区"
                }, {
                    value: "110113",
                    text: "顺义区"
                }, {
                    value: "110114",
                    text: "昌平区"
                }, {
                    value: "110115",
                    text: "大兴区"
                }, {
                    value: "110116",
                    text: "怀柔区"
                }, {
                    value: "110117",
                    text: "平谷区"
                }, {
                    value: "110228",
                    text: "密云县"
                }, {
                    value: "110229",
                    text: "延庆县"
                }, {
                    value: "110230",
                    text: "其它区"
                }]
            }]
        }, {
            value: '120000',
            text: '天津市',
            children: [{
                value: "120100",
                text: "天津市",
                children: [{
                    value: "120101",
                    text: "和平区"
                }, {
                    value: "120102",
                    text: "河东区"
                }, {
                    value: "120103",
                    text: "河西区"
                }, {
                    value: "120104",
                    text: "南开区"
                }, {
                    value: "120105",
                    text: "河北区"
                }, {
                    value: "120106",
                    text: "红桥区"
                }, {
                    value: "120107",
                    text: "塘沽区"
                }, {
                    value: "120108",
                    text: "汉沽区"
                }, {
                    value: "120109",
                    text: "大港区"
                }, {
                    value: "120110",
                    text: "东丽区"
                }, {
                    value: "120111",
                    text: "西青区"
                }, {
                    value: "120112",
                    text: "津南区"
                }, {
                    value: "120113",
                    text: "北辰区"
                }, {
                    value: "120114",
                    text: "武清区"
                }, {
                    value: "120115",
                    text: "宝坻区"
                }, {
                    value: "120116",
                    text: "滨海新区"
                }, {
                    value: "120221",
                    text: "宁河县"
                }, {
                    value: "120223",
                    text: "静海县"
                }, {
                    value: "120225",
                    text: "蓟县"
                }, {
                    value: "120226",
                    text: "其它区"
                }]
            }]
        }];

        var provinceEle = document.getElementById('province');
        var cityEle = document.getElementById('city');
        var countyEle = document.getElementById('county');

        var selectedProvince = {},
            selectedCity = {};

        function init() {
            createSelectOptions(cityData3, provinceEle, function() {
                createSelectOptions(cityData3[0].children, cityEle);
                createSelectOptions(cityData3[0].children[0].children, countyEle);
            });
            provinceEle.addEventListener('change', function(e) {
                var provinceValue = e.target.value;
                selectedProvince = cityData3.filter(function(v) {
                    return v.value === provinceValue;
                })[0];
                selectedCity = selectedProvince.children[0];
                createSelectOptions(selectedProvince.children, cityEle);
                createSelectOptions(selectedCity.children, countyEle);
            });
            cityEle.addEventListener('change', function(e) {
                var cityValue = e.target.value;
                selectedCity = selectedProvince.children.filter(function(v) {
                    return v.value === cityValue;
                })[0];
                createSelectOptions(selectedCity.children, countyEle);
            });
        }

        init();

        function createSelectOptions(data, element, callback) {
            var options = '';
            data.forEach(function(v, i) {
                options = options + '<option value=' + v.value + '>' + v.text + '</option>';
            });
            element.innerHTML = options;
            if(typeof callback === 'function') callback();
        }
    </script>
</body>
</html>