三级联动

作者: 荒天帝886 | 来源:发表于2019-04-28 15:03 被阅读0次

ios--- UIpickerView 省市区三级联动
OptionPickerView
整理一些Vue开发中常用的组件(长期更新)
原生js实现地址选择组件（三级联动）
常用css特效样式，持续收集中
jQuery 实现省市区三级联动
ajax实现三级联动
BING封装控件
省市三级联动
iview踩坑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/jquery.js"></script>
    <script>

        $(function () {
            var provinceSel = $('.province');
            var citySel = $('.city');
            var countySel = $('.county');
            var provinceLabel = '';
            initProvince(provinceSel);

            provinceSel.on('change', function () {
                var option = '<option value="">请选择</option>';
                countySel.html(option)
                provinceLabel = provinceSel.val();
                getCity(provinceLabel, citySel);
            });

            citySel.on('change', function () {
                countySel.empty();
                var cityLabel = citySel.val();
                getCounty(provinceLabel, cityLabel, countySel)
            })
        });

        //初始化省数据
        function initProvince(provinceSel) {
            $.ajax({
                url: '../static/js/three.json',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 1) {
                        var options = '<option value="">请选择</option>';
                        $.each(res.data, function (idx, ele) {
                            var option = `<option value="${ele.label}">${ele.value}</option>`;
                            options += option;
                        })
                        provinceSel.html(options);
                    }
                }
            })
        }

        //通过省级label获取市级数据
        function getCity(provinceLabel, citySel) {
            $.ajax({
                url: '../static/js/three.json',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 1) {
                        var options = '<option value="">请选择</option>';
                        $.each(res.data, function (idx, ele) {
                            if (ele.label == provinceLabel) {
                                $.each(ele.children, function (idx, ele) {
                                    var option = `<option value="${ele.label}">${ele.value}</option>`;
                                    options += option;
                                })
                                citySel.html(options)
                            }
                        })
                    }
                }
            })
        }

        //通过省级label和市级label获取县级数据
        function getCounty(provinceLabel, cityLabel, countySel) {
            $.ajax({
                url: '../static/js/three.json',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 1) {
                        var options = '<option value="">请选择</option>';
                        $.each(res.data, function (idx, ele) {
                            if (ele.label == provinceLabel) {
                                $.each(ele.children, function (idx, ele) {
                                    if (ele.label == cityLabel) {
                                        $.each(ele.children, function (idx, ele) {
                                            var option = `<option value="${ele.label}">${ele.value}</option>`;
                                            options += option;
                                        })
                                        countySel.html(options);
                                    }
                                })
                            }
                        })
                    }
                }
            })
        }

    </script>
</head>
<body>
<select class="province">
    <option value="">请选择</option>
</select>
<select class="city">
    <option value="">请选择</option>
</select>
<select class="county">
    <option value="">请选择</option>
</select>
</body>
</html>