省市级联--数据库--基础数据表

Table: area_base

字段信息

	Field	Type	Comment
	area_code	varchar(32)	地区码
	parent_area_code	varchar(32)	父地区码
	area_name	varchar(128)	地区名称
	area_type	tinyint(2)	地区类型：0--无 1--省级地区 2--市级地区 3--县级地区
	create_time	timestamp	创建时间

索引信息

	Indexes	Columns	Index_Type
	PRIMARY	area_code	Unique

DDL信息

create table

CREATE TABLE `area_base` (    `area_code` varchar(32) NOT NULL COMMENT '地区码',    `parent_area_code` varchar(32) DEFAULT NULL COMMENT '父地区码',    `area_name` varchar(128) NOT NULL COMMENT '地区名称',    `area_type` tinyint(2) NOT NULL DEFAULT '0' COMMENT '地区类型：0--无 1--省级地区 2--市级地区 3--县级地区',    `create_time` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT '创建时间',    PRIMARY KEY (`area_code`)  ) ENGINE=InnoDB DEFAULT CHARSET=utf8

初始化基础数据 :

INSERT INTO `area_base` 
(`area_code`, `parent_area_code`, `area_name`, `area_type`, `create_time`) 
VALUES 
('1001', NULL, '河南省', '1', '0000-00-00 00:00:00'),
('2001', '1001', '郑州市', '2', '0000-00-00 00:00:00'),
('2002', '1001', '洛阳市', '2', '0000-00-00 00:00:00'),
('2003', '1001', '开封市', '2', '0000-00-00 00:00:00'),
('2004', '1001', '商丘市', '2', '0000-00-00 00:00:00'),
('2005', '1001', '许昌市', '2', '0000-00-00 00:00:00'),
('3001', '2001', '金水区', '3', '0000-00-00 00:00:00'),
('3002', '2001', '惠济区', '3', '0000-00-00 00:00:00'),
('3003', '2001', '二七区', '3', '0000-00-00 00:00:00')

jQuery  Ajax  ：  

<span>省级地区</span>

<select  id="province" >

           <option value="--" selected="selected">--请选择--</option> 
           <option value="1001">河南省</option>

</select>

<span>市级地区</span>

<select  id="city" >      

    <option value="--" selected="selected">--请选择--</option> 

    <option value="2001">郑州市</option>

    <option value="2002">洛阳市</option>

    <option value="2003">开封市</option>

    <option value="2004">商丘市</option>

    <option value="2005">许昌市</option>

</select>

<span>县级地区</span>

<select  id="county" >      

    <option value="--" selected="selected">--请选择--</option> 

    <option value="3001">金水区</option>

    <option value="3002">惠济区</option>

    <option value="3003">二七区</option>

</select>

利用Ajax实现级联操作： 

处理市级显示：

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

    var url = "http://dev.isoftstone.com.cn/getArea.do"; 

    var areaCode = $("#province  option:selected").val(); 

    if(areaCode ==="--"){

       return ;

     }

$.ajax({
url: url,
type:"get",
data:{"areaCode":areaCode },
dataType:"json",
success:function(data) {
if(data.code != "200"){
console.log(data);
return ;

}                        

                        //处理返回的数据   塞进  $("#city")里

},
error:function(data){
mui.toast('系统异常！');
}

});

});

处理县级显示：  同理市级……