大家,是否有一个最新的站点,它在 JSON 中公开特定国家/地区的邮寄地址和电话号码的表单字段,这样我就可以迭代 JSON,创建 HTML 并始终在我的网站上显示我的地址和电话号码字段-迄今为止?理想情况下,每个字段都可以映射到每个国家/地区的相似字段,以鼓励适当的数据结构。
谢谢!布赖恩
取自以上来源:
(function($) {
var _fields = {
address1: { id: "address1", name: "address1" },
address2: { id: "address2", name: "address2" },
address3: { id: "address3", name: "address3" },
locality: { id: "locality", name: "locality" },
region: { id: "region", name: "region" },
postCode: { id: "postCode", name: "postCode" }
};
var _labels = {
address1: "Address:",
address2: "",
address3: "",
area: "Area:",
city: "City:",
county: "County:",
department: "Department:",
district: "District:",
emirate: "Emirate:",
island: "Island:",
locality: "City/Town:",
metroProvince: "Metro/Province:",
region: "State/Province/Region:",
postalCode: "Postal Code:",
postCode: "Zip/Postal Code:",
prefecture: "Prefecture:",
province: "Province:",
state: "State:",
zip: "Zip:"
};
var _layouts = {};
var _templates = {
text: function(data) {
return "<label for=\"" + data.id + "\">" + data.label + "</label><input id=\"" + data.id + "\" name=\"" + data.name + "\" type=\"text\"/>";
},
select: function(data) {
var html = "<label for=\"" + data.id + "\">" + data.label + "</label><select id=\"" + data.id + "\" name=\"" + data.name + "\" disabled=\"disabled\"><option selected=\"selected\">Loading...</option></select>";
data.source(function(regions) {
var html2 = "";
$.each(regions, function(i, item) {
html2 += "<option value=\"" + item.value + "\">" + item.text + "</option>";
});
$("#" + data.id).removeAttr("disabled").html(html2);
});
return html;
}
};
var _defaultLayout = [
{ fieldName: "address1", templateName: "text", labelName: "address1" },
{ fieldName: "address2", templateName: "text", labelName: "address2" },
{ fieldName: "address3", templateName: "text", labelName: "address3" },
{ fieldName: "locality", templateName: "text", labelName: "locality" },
{ fieldName: "region", templateName: "text", labelName: "region" },
{ fieldName: "postCode", templateName: "text", labelName: "postCode" }
];
$.fn.globalAddress = function(countrySelect, settings) {
settings = $.extend(true, {}, {
labels: _labels,
fields: _fields,
templates: _templates
}, settings);
var addressContainer = $(this);
$(countrySelect).change(function(e) {
var country = $(this).val();
var layout = _layouts[country] ? _layouts[country] : _defaultLayout;
var html = "";
$.each(layout, function(i, l) {
var data = $.extend(true, { label: _labels[l.labelName] }, settings.fields[l.fieldName], l.data);
html += settings.templates[l.templateName](data);
});
$(addressContainer).html($(html));
}).trigger("change");
return this;
};
$.globalAddressExtend = function(key, layout) {
_layouts[key] = layout;
};
})(jQuery)
用法:
(function($) {
$.globalAddressExtend("US", [
{ fieldName: "address1", templateName: "text", labelName: "address1" },
{ fieldName: "address2", templateName: "text", labelName: "address2" },
{ fieldName: "address3", templateName: "text", labelName: "address3" },
{ fieldName: "locality", templateName: "text", labelName: "city" },
{ fieldName: "region", templateName: "text", labelName: "state", source: function(callback) {
//get data here and call the callback function
} },
{ fieldName: "postCode", templateName: "text", labelName: "zip" }
]);
$.globalAddressExtend("CA", [
{ fieldName: "address1", templateName: "text", labelName: "address1" },
{ fieldName: "address2", templateName: "text", labelName: "address2" },
{ fieldName: "address3", templateName: "text", labelName: "address3" },
{ fieldName: "locality", templateName: "text", labelName: "city" },
{ fieldName: "region", templateName: "text", labelName: "province", source: function(callback) {
//get data here and call the callback function
} },
{ fieldName: "postCode", templateName: "text", labelName: "postalCode" }
]);
});