基于mui省市区数据自封插件

2018-08-28 本文已影响0人我的小可爱卓

废话不多说直接上代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/citydata3.js"></script>  mui官网自己下数据
    <script src="js/xyjCity.js"></script>
</head>

<body>
    <div class="main"></div>
    <div class="main1"></div>
    <script>
        $.city({
            ele: ".main", /*页面要追加的位置*/
            id: "distpicker",
            province: "province-e",  /*省*/
            city: "city-e",   /*市*/
            district: "district-e",   /*区*/
            provinceData: "",   /*省数据*/
            cityData: "", /*市数据*/
            districtData: "",   /*区数据*/
            districtshow:"",    /*是否展示区*/
            getData: function(provinceData, cityData, districtData) {
                console.log(provinceData)
                console.log(cityData)
                console.log(districtData)
            }
        })
        
    </script>
</body>

</html>

                            <div class="select">
                                <select class="form-control" id=${self.options.province} value="——省——" style="padding: 0;width:130px">
                                    <option value="">——省——</option>
                                </select>
                            </div>
                        </div>
                        <div style="display: flex;align-items: center;padding: 0px;">
                            <label class="city">
                                市：
                            </label>
                            <div class="select">
                                <select class="form-control" id=${self.options.city} style="width:130px">
                                    <option value="">——市——</option>
                                </select>
                            </div>
                        </div>
                        <div class=" ${self.options.district+"show"}"   style="display: flex;align-items: center;padding: 0px;">
                            <label class="district">
                                区：
                            </label>
                            <div class="select">
                                <select class="form-control" id=${self.options.district} style="width:130px">
                                    <option value="">——区——</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>`
    $(self.options.ele).append(mainHtml)
    if(self.options.districtshow == "false") {
        $("." + self.options.district + "show").remove()
    }
    html = '';
    value = '';
    area = '';
    /*获取省的数据*/
    $.each(cityData3, function(i, v) {
        html += `<option value=${v.text}>${v.text}</option>`;
    });
    $("#" + self.options.province).append(html)
    /*选取省的时候获取市的数据*/
    $("#" + self.options.province).on("change", function() {
        value = "";
        // 找出省的父级
        var parent = $(this).parent().parent();
        // 找当前省同级的市
        var citySelect = parent.next().find('select');
        // 找当前市同级的区
        districtSelect = parent.next().next().find('select');
        
        var index = parent.find("option:checked").index() - 1;
        if(index == -1) {
            citySelect.html(`<option value="">——市——</option>`);
            districtSelect.html('<option value="">——区——</option>');
            return;
        }
        cityData = cityData3[index].children;
        /*追加市的数据*/
        $.each(cityData, function(i, v) {
                if ( i == 0 ) {
                    value += `<option value="">——市——</option><option value=${v.text}>${v.text}</option>`;
                } else {
                    value += `<option value=${v.text}>${v.text}</option>`;
                }
        });
        citySelect.html(value);
        /*市发生改变获取数据*/
        $("#" + self.options.city).on("change", function() {
            var area = "";
            districtSelect.find("option").remove();
            var inx = citySelect.find("option:checked").index() - 1;
            if(inx == -1) {
                districtSelect.html('<option value="">——区——</option>');
                return;
            }
            var districtData = cityData[inx].children;
            $.each(districtData, function(i, v) {
                if ( i == 0 ) {
                    area += `<option value="">——区——</option><option value=${v.text}>${v.text}</option>`;
                } else {
                    area += `<option value=${v.text}>${v.text}</option>`;
                }
            });
            districtSelect.html(area);
        })
    })
    html = '';
    value = '';
    area = '';
    $("#" + self.options.province).on("change", function() {
        self.options.provinceData = "";
        self.options.cityData = "";
        self.options.districtData = "";
        self.options.provinceData = $(this).val()
        self.options.getData(self.options.provinceData, self.options.cityData, self.options.districtData)

    })
    $("#" + self.options.province).parent().parent().next().find('select').on("change", function() {
        self.options.cityData = $(this).val()
        self.options.getData(self.options.provinceData, self.options.cityData, self.options.districtData)

    })

    $("#" + self.options.province).parent().parent().next().next().find('select').on("change", function() {
        self.options.districtData = $(this).val()
        self.options.getData(self.options.provinceData, self.options.cityData, self.options.districtData)

    })

}
$.city = function(options) {
    var option = $.extend(true, {}, city.DEFAULT, options);
    return new city(options);
}

})(jQuery)

基于mui省市区数据自封插件

猜你喜欢

热点阅读