Three linkage menu for Province, City, County

最新推荐文章于 2022-10-02 15:06:15 发布

stefli

最新推荐文章于 2022-10-02 15:06:15 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： menu function 360 stylesheet callback class

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

Javascript 专栏收录该内容

32 篇文章

订阅专栏

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