基于jquery实现

js

varselectCon=[
	{"id":"#countryID","name":"国家"},{"id":"#provinceID","name":"省份"},{"id":"#cityID","name":"城市"},{"id":"#countyID","name":"地区"}
	];
	/**	移除全部选择项内容,并添加默认提示信息,参数selectCon的下标*/
	functionremoveOption(){
		varid="";
		varoption="";
		for(vari=0;i<arguments.length;i++){
			id=selectCon[arguments[i]].id;
			option=id+"option";
			$(option).remove();
			$(id).append(
					"<optionvalue=''>请选择"+selectCon[arguments[i]].name
							+"</option>");
		}
	};
	/**	追加选择项内容，参数：要添加的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<size;i++){
				option+="<optionvalue='"+jsonString[i].id+"'>"
						+jsonString[i].name+"</option>";
			}
			$(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产品可见地区：
<selectid="countryID">
<optionvalue="">请选择国家</option>
<optionvalue="1">中国</option>
</select>
<selectid="provinceID"><optionvalue="">请选择省份</option></select>
<selectid="cityID"><optionvalue="">请选择城市</option></select>
<selectid="countyID"><optionvalue="">请选择地区</option></select>

返回的格式示例：

[
{
"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='行政编码表';