378 words
|
6.30 分钟
jQuery 省市三级联动
2017-04-30
页面打开默认获取省信息,选择省以后,再获取市信息,点击市以后,再获取地区信息
var regions = {
state: $('#state'),
city: $('#city'),
district: $('#district'),
init: function () {
var _this = this
_this.getState(_this.state, 1)
_this.state.change(function () {
var id = $(this).val()
_this.city.find('option:gt(0)').remove()
_this.district.find('option:gt(0)').remove()
_this.getCity(_this.city, id)
})
_this.city.change(function () {
var id = $(this).val()
_this.district.find('option:gt(0)').remove()
_this.getDistrict(_this.district, id)
})
},
getState: function (elem, id, callback) {
this.getJson(elem, id, callback)
},
getCity: function (elem, id, callback) {
this.getJson(elem, id, callback)
},
getDistrict: function (elem, id, callback) {
this.getJson(elem, id, callback)
},
render: function (elem, data, callback) {
if (data.regions && !$.isEmptyObject(data.regions)) {
elem.find('option:gt(0)').remove()
$.each(data.regions, function (name, value) {
elem.append(
'<option value ="' + value.id + '">' + value.name + '</option>'
)
})
if (callback && typeof callback == 'function') {
callback()
}
}
},
getJson: function (elem, id, callback) {
var _this = this
$.ajax({
type: 'post',
url: system.url('address/get-regions'),
data: {
parent_id: id,
},
dataType: 'json',
cache: false,
success: function (resp) {
if (resp.status) {
_this.render(elem, resp.data, callback)
}
},
error: function () {},
})
},
}
callback的作用
当获取信息时,需要渲染对应的省市信息 通过添加回调,可以依次获取省、市、地区信息
regions.getState(regions.state, 1, function () {
$('#state').val(_this.attr('data-state'))
regions.getCity(regions.city, _this.attr('data-state'), function () {
$('#city').val(_this.attr('data-city'))
regions.getDistrict(regions.district, _this.attr('data-city'), function () {
$('#district').val(_this.attr('data-district'))
})
})
})