这是一个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);
});
}
})