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 |
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 ;
}
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('系统异常!');
}
});
});