shulidong
6/27/2017 - 8:19 AM

这是一个jquery的扩展方法实例

这是一个jquery的扩展方法实例

$.fn.extend({
 /**
     * 结构化地址函数,
     * 用jquery元素调用例如<td id="example"></td>,
     * 可以生成带有省市下拉框&隐藏域的一组子元素。
     * 当有后台json对象modelAttr参数传入时,
     * 对应填充到对应关键字key下的元素中。
     * @author shu lidong
     * @param modelAttr
     * e.g. $("#example").addressBox('family')
     *      $("#example").addressBox('family',$!{borrowerPersonExtension})
     */
    addressBox: function (key, modelAttr) {
        var target = $(this);
        var provId = "";
        var cityId = "";
        if (typeof modelAttr == 'undefined') {
            modelAttr = "";
        }
        var cityName = $("<input type='hidden'  name='" + key + "CityName'/>");
        var provinceName = $("<input type='hidden' name='" + key + "ProvinceName'/>");
        if (modelAttr) {
            cityId = modelAttr[key + "CityId"];
            provId = modelAttr[key + "ProvinceId"];
            $(cityName).val(modelAttr[key + "CityName"]);
            $(provinceName).val(modelAttr[key + "ProvinceName"]);
        }
        var province = $("<select name='" + key + "ProvinceId' style='width: 140px' ></select>").fillAddress(10000, provId).bind('change', function () {
            if ($(this).val()) {
                $(cityName).val("");
                $(city).fillAddress($(this).val());
                $(provinceName).val($(this).children("option:selected").text());
            } else {
                $(cityName).val("");
                $(provinceName).val("");
            }
        });
        var city = $("<select  name='" + key + "CityId' style='width: 140px' ></select>").fillAddress(provId, cityId).bind('change', function () {
            if ($(this).val()) {
                $(cityName).val($(this).children("option:selected").text());
            } else {
                $(cityName).val("");
            }
        });
        target.append(provinceName);
        target.append(cityName);
        target.append(province);
        target.append(city);
    },
    //addressBox帮助函数:根据情况填装下拉框元素
    fillAddress: function (parentId, selfId) {
        var target = $(this);
        if (typeof selfId == 'undefined') {
            selfId = "";
        }
        if (parentId) {
            target.getAddressSelect(parentId, selfId);
        } else {
            target.html("<option value=''>请选择市</option>");
        }

        return target;
    },
    //fillAddress帮助函数:拼装下拉框option元素
    getAddressSelect: function (parentId, selfId) {
        var target = $(this);
        postDataExt('//', {'': parseInt(parentId)}, true, false).done(function (data) {
            //拼装下拉框
            jsonData = data
            var option = "";
            if (parentId == 10000) {
                option = "<option value=''>请选择省</option>";
            } else {
                option = "<option value=''>请选择市</option>";
            }
            $.each(jsonData, function (index, item) {
                if (item.id == selfId) {
                    option += "<option value=" + item.id + " selected>" + item.areaName + "</option>";
                }
                option += "<option value=" + item.id + ">" + item.areaName + "</option>";
            });
            target.html(option);
        });

    }  
})