前端ajax请求json省市联动,ajax加载json三级联动-省市县

基于jquery实现

js

varselectCon=[

{"id":"#countryID","name":"国家"},{"id":"#provinceID","name":"省份"},{"id":"#cityID","name":"城市"},{"id":"#countyID","name":"地区"}

];

/**移除全部选择项内容,并添加默认提示信息,参数selectCon的下标*/

functionremoveOption(){

varid="";

varoption="";

for(vari=0;i

id=selectCon[arguments[i]].id;

option=id+"option";

$(option).remove();

$(id).append(

"请选择"+selectCon[arguments[i]].name

+"");

}

};

/**追加选择项内容，参数：要添加的jqueryId，行政区域父id*/

functionaddOption(jqueryId,parentId){

if(!parentId){

return;

}

varurl="${pageContext.request.contextPath}/district/getDistricte.do";

$.post(url,{

"parentId":parentId

},function(jsonString){

varsize=jsonString.length;

varoption="";

for(vari=0;i

option+=""

+jsonString[i].name+"";

}

$(jqueryId).append(option);

//console.log(option);

});

};

//国家-省

$("#countryID").change(function(){

varparentId=$("#countryIDoption:selected").val();

removeOption(1,2,3);

addOption("#provinceID",parentId);

});

//省份-城市

$("#provinceID").change(function(){

varparentId=$("#provinceIDoption:selected").val();

removeOption(2,3);

addOption("#cityID",parentId);

});

//城市-区域

$("#cityID").change(function(){

varparentId=$("#cityIDoption:selected").val();

removeOption(3);

addOption("#countyID",parentId);

});

html产品可见地区：

请选择国家

中国

请选择省份

请选择城市

请选择地区

返回的格式示例：

[

{

"id":3,"parentId":2,"code":"110100","name":"北京市辖区"

},{

"id":18,"code":"110200","name":"\n县"

}

]

CREATETABLE`tb_district`(

`id`int(11)NOTNULLAUTO_INCREMENT,`parent_id`int(11)DEFAULTNULL,COMMENT'父id'

`code`varchar(6)NOTNULLDEFAULT''COMMENT'行政编码',`name`varchar(255)NOTNULLDEFAULT''COMMENT'行政名称',PRIMARYKEY(`id`),UNIQUEKEY`uni_district_code`(`code`),KEY`parent_id`(`parent_id`),)ENGINE=InnoDBAUTO_INCREMENT=3515DEFAULTCHARSET=utf8COMMENT='行政编码表';

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。