基于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='行政编码表';
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。