ajax加载json三级联动-省市县

2019独角兽企业重金招聘Python工程师标准>>>

    基于jquery实现

js

        var selectCon = [
	{"id" : "#countryID","name" : "国家"}, 
	{"id" : "#provinceID","name" : "省份"}, 
	{"id" : "#cityID","name" : "城市"}, 
	{"id" : "#countyID","name" : "地区"} 
	];
	/**	移除全部选择项内容,并添加默认提示信息,参数selectCon的下标*/
	function removeOption() {
		var id = "";
		var option = "";
		for ( var i = 0; i < arguments.length; i++) {
			id = selectCon[arguments[i]].id;
			option = id + " option";
			$(option).remove();
			$(id).append(
					"<option value=''>请选择" + selectCon[arguments[i]].name
							+ "</option>");
		}
	};
	/**	追加选择项内容，参数：要添加的jqueryId，行政区域父id*/
	function addOption(jqueryId, parentId) {
		if (!parentId) {
			return;
		}
		var url = "${pageContext.request.contextPath}/district/getDistricte.do";
		$.post(url, {
			"parentId" : parentId
		}, function(jsonString) {
			var size = jsonString.length;
			var option = "";
			for ( var i = 0; i < size; i++) {
				option += "<option value='"+jsonString[i].id+"'>"
						+ jsonString[i].name + "</option>";
			}
			$(jqueryId).append(option);
			//console.log(option);
		});
	};

	//国家-省
	$("#countryID").change(function() {
		var parentId = $("#countryID option:selected").val();
		removeOption(1, 2, 3);
		addOption("#provinceID", parentId);
	});
	//省份-城市
	$("#provinceID").change(function() {
		var parentId = $("#provinceID option:selected").val();
		removeOption(2, 3);
		addOption("#cityID", parentId);
	});
	//城市-区域
	$("#cityID").change(function() {
		var parentId = $("#cityID option:selected").val();
		removeOption(3);
		addOption("#countyID", parentId);
	});

html产品可见地区：
<select id="countryID">
<option value="">请选择国家</option>
<option value="1">中国</option>
</select>
<select id="provinceID"><option value="">请选择省份</option></select>
<select id="cityID"><option value="">请选择城市</option></select>
<select id="countyID"><option value="">请选择地区</option></select>

    返回的格式示例：

[
    {
        "id": 3,
        "parentId": 2,
        "code": "110100",
        "name": "北京市辖区"
    },
    {
        "id": 18,
        "parentId": 2,
        "code": "110200",
        "name": "\n县"
    }
]

CREATE TABLE `tb_district` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) DEFAULT NULL, COMMENT '父id'
  `code` varchar(6) NOT NULL DEFAULT '' COMMENT '行政编码',
  `name` varchar(255) NOT NULL DEFAULT '' COMMENT '行政名称',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uni_district_code` (`code`),
  KEY `parent_id` (`parent_id`),
) ENGINE=InnoDB AUTO_INCREMENT=3515 DEFAULT CHARSET=utf8 COMMENT='行政编码表';

转载于:https://my.oschina.net/u/817904/blog/659616