基于jquery实现html
jsjquery
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>
返回的格式示例:
sql
[ { "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='行政编码表';