Three linkage menu for Province, City, County_provincecitycountylinkage-优快云博客

本文链接：https://blog.youkuaiyun.com/stefli/article/details/6564125

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