jquery省市区联动特效
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
1.、省市区联动
//
$(function() {
$("#loc").LocationSelect();
$("#foo").click(function() {
var info = $("#loc").getLocation();
alert(info.province+" "+info.city+" "+info.district);
return false;
});
});
//]]>
LocationSelect - demo
Location.js
(function($) {
$.LocationSelect = {
defaults : {
data: "areas.json",
autoDetect : false
},
build : function(user_opts) {
var options = $.extend($.LocationSelect.defaults, user_opts);
return $(this).each(function() {
var specs = {
holder : $(this),
selectors: {},
_province : "",
_city : "",
_pCode : "",
_cCode : "",
opts : options
};
specs.holder.append('');
try{
$.LocationSelect.init(specs);
} catch(e) {
setTimeout(function() {
$.LocationSelect.init(specs);
},1000);
}
});
},
data : {
province : [],
city: [],
district: []
},
setDefaultLocation: function(specs){
var geocoder = new GClientGeocoder();
var userLatLng = new tLng(geoip_latitude(), geoip_longitude());
geocoder.getLocations(userLatLng, function(response){
if (!response || response.Status.code != 200) {
app.debug("no results from reverse geocoding!");
}
else {
var node = response.Placemark[0];
specs._province = node.AddressDetails.Country.AdministrativeArea.AdministrativeAreaName;
specs._city = node.AddressDetails.Country.AdministrativeArea.Locality.LocalityName;
$.each($.LocationSelect.data.province, function(i, item){
if ( == specs._province) {
specs._pCode = item.code;
}
});
specs.selectors.province[0].value = specs._pCode;
$.each($.LocationSelect.data.city, function(i, item){
if (item.code.startsWith(specs._pCode.substring(0, 2))) {
specs.selectors.city.append("");
if ( == specs._city) {
specs._cCode = item.code;
}
}
});
specs.selectors.city[0].value = specs._cCode;
specs.selectors.city.change();
}
});
},
init: function(specs){
specs.selectors.province = specs.holder.find("select[name='province']");
specs.selectors.city = specs.holder.find("select[name='city']");
specs.selectors.district = specs.holder.find("select[name='district']");
$.getJSON(specs.opts.data, function(data){
$.LocationSelect.data.province = data.province;
$.LocationSelect.data.district = data.district;
$.LocationSelect.data.city = data.city;
$(specs.selectors.city).change(function(evt){