Three linkage menu for Province, City, County

来源：互联网发布：大数据营销与创新答案编辑：程序博客网时间：2024/06/03 19:13

To load adzone faster, we need to use ajax to load the province, city or county when it's parent changed.

Here is the major code:

1. Main page

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><%@taglib prefix="s" uri="/struts-tags"%><%@taglib prefix="tms" uri="/tms-tags"%><s:set var="ctx">${pageContext.request.contextPath}</s:set><link rel="stylesheet" type="text/css" href="${ctx}/resources/themes/theme_normal/css/jquery-ui-1.8.4.custom.css" mce_href="${ctx}/resources/themes/theme_normal/css/jquery-ui-1.8.4.custom.css"><mce:script type="text/javascript" src="${ctx}/resources/js/jquery-1.5.2.min.js" mce_src="${ctx}/resources/js/jquery-1.5.2.min.js"></mce:script><mce:script type="text/javascript" src="${ctx}/resources/js/tms.common.js" mce_src="${ctx}/resources/js/tms.common.js"></mce:script><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><mce:script type="text/javascript"></mce:script></head> <body><h2>Province - City - County</h2><div id="adZoneWrapper">Province: <select name="province" id="province" class="normalboxs"><option value="">-- Choose Province --</option></select>City: <select name="city" id="city" class="normalboxs"><option value="">-- Choose City --</option></select>County: <select name="county" id="county" class="normalboxs"><option value="">-- Choose County --</option></select></div><br /><input type="button" id="testAdZone" value="Get Selected Value" /></body></html>

2. Common javascript in tms.common.js

$.extend({"getAdZoneOptions": function(code, name, level, url, callback) {param = [];param.push({"name": "adZoneCode", "value": code});param.push({"name": "adZoneName", "value": name});param.push({"name": "adZoneLevel", "value": level});$.ajax({url: url,type: "POST",data: param,dataType: "json", timeout: 20000, contentType: "application/x-www-form-urlencoded; charset=utf-8",success: function(data) {callback(data);},error: function() {$.showWarningDialog("警告", "加载失败！");}});},"resetAdZoneOptions": function(obj, title) {$(obj).find('option') .remove() .end() .append('<option value="">' + title + '</option>') .val('');}});

3. Data format

We use json to transfer the data, it's format must be:

3.1 Province

{"code":null,"data":[{"code":"110000","name":"北京市"},{"code":"120000","name":"天津市"},{"code":"130000","name":"河北省"},{"code":"140000","name":"山西省"},{"code":"150000","name":"内蒙古自治区"},{"code":"210000","name":"辽宁省"},{"code":"220000","name":"吉林省"},{"code":"230000","name":"黑龙江省"},{"code":"310000","name":"上海市"},{"code":"320000","name":"江苏省"},{"code":"330000","name":"浙江省"},{"code":"340000","name":"安徽省"},{"code":"350000","name":"福建省"},{"code":"360000","name":"江西省"},{"code":"370000","name":"山东省"},{"code":"410000","name":"河南省"},{"code":"420000","name":"湖北省"},{"code":"430000","name":"湖南省"},{"code":"440000","name":"广东省"},{"code":"450000","name":"广西壮族自治区"},{"code":"460000","name":"海南省"},{"code":"500000","name":"重庆市"},{"code":"510000","name":"四川省"},{"code":"520000","name":"贵州省"},{"code":"530000","name":"云南省"},{"code":"540000","name":"西藏自治区"},{"code":"610000","name":"陕西省"},{"code":"620000","name":"甘肃省"},{"code":"630000","name":"青海省"},{"code":"640000","name":"宁夏回族自治区"},{"code":"650000","name":"新疆维吾尔自治区"}],"level":"State","name":"China"}

3.2 City (山西省)

{"code":"360000","data":[{"code":"360100","name":"南昌市"},{"code":"360200","name":"景德镇市"},{"code":"360300","name":"萍乡市"},{"code":"360400","name":"九江市"},{"code":"360500","name":"新余市"},{"code":"360600","name":"鹰潭市"},{"code":"360700","name":"赣州市"},{"code":"360800","name":"吉安市"},{"code":"360900","name":"宜春市"}],"level":"City","name":"江西省"}

3.3 County

{"code":"360100","data":[{"code":"360101","name":"市辖区"},{"code":"360102","name":"东湖区"},{"code":"360103","name":"西湖区"},{"code":"360104","name":"青云谱区"},{"code":"360105","name":"湾里区"},{"code":"360111","name":"郊区"},{"code":"360121","name":"南昌县"},{"code":"360122","name":"新建县"},{"code":"360123","name":"安义县"},{"code":"360124","name":"进贤县"}],"level":"County","name":"南昌市"}

4. Result

Province - City - County

Province: City: County: