1. Pages and cascading js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Provincial and municipal secondary linkage menu Demo</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
cities = new Object();
cities['Beijing'] = new Array('Beijing-101010100');
cities['Shanghai'] = new Array('Shanghai-101020100');
cities['Tianjin'] = new Array('Tianjin-101030100');
cities['Chongqing'] = new Array('Chongqing-101040100');
cities['Hebei Province'] = new Array('Shijiazhuang-101090101', 'Zhangjiakou-101090301', 'Chengde-101090402', 'Qinhuangdao-101091101', 'Tangshan-101090501', 'Langfang-101090601', 'Baoding- 101090201', 'Cangzhou-101090701', 'Hengshui-101090801', 'Xingtai-101090901', 'Handan-101091001');
cities['Shanxi Province'] = new Array('Taiyuan-101100101', 'Datong-101100201', 'Shuozhou-101100901', 'Yangquan-101100301', 'Changzhi-101100501', 'Jincheng-101100601', 'Xinzhou -101101001', 'Lvliang-101101100', 'Jinzhong-101100401', 'Linfen-101100701', 'Yuncheng-101100801');
cities['Liaoning Province'] = new Array('Shenyang-101070101', 'Chaoyang-101071201', 'Fuxin-101070901', 'Tieling-101071101', 'Fushun-101070401', 'Benxi-101070501', 'Liaoyang- 101071001', 'Anshan-101070301', 'Dandong-101070601', 'Dalian-101070201', 'Yingkou-101070801', 'Panjin-101071301', 'Jinzhou-101070701', 'Huludao-101071401');
cities['Jilin Province'] = new Array('Changchun-101060101', 'Baicheng-101060601', 'Songyuan-101060801', 'Jilin-101060201', 'Siping-101060401', 'Liaoyuan-101060701', 'Tonghua- 101060501', 'Baishan-101060901', 'Yanbian-101060312');
cities['Heilongjiang Province'] = new Array('Harbin-101050101', 'Qiqihar-101050201', 'Heihe-101050601', 'Daqing-101050901', 'Yichun-101050801', 'Hegang-101051201', ' Jiamusi-101050401', 'Shuangya Mountain-101051301', 'Qitaihe-101051002', 'Jixi-101051101', 'Mudanjiang-101050301', 'Suihua-101050501', 'Daxinganling-101050701');
cities['Jiangsu Province'] = new Array('Nanjing-101190101', 'Xuzhou-101190801', 'Lianyungang-101191001', 'Suqian-101191301', 'Huaiyin-101190907', 'Yancheng-101190701', 'Yangzhou- 101190601', 'Taizhou-101191201', 'Nantong-101190501', 'Zhenjiang-101190301', 'Changzhou-101191101', 'Wuxi-101190201', 'Suzhou-101190401');
cities['Zhejiang Province'] = new Array('Hangzhou-101210101', 'Huzhou-101210201', 'Jiaxing-101210301', 'Zhoushan-101211101', 'Ningbo-101210401', 'Shaoxing-101210501', 'Jinhua- 101210901', 'Taizhou-101210601', 'Wenzhou-101210701', 'Lishui-101210801');
cities['Anhui Province'] = new Array('Hefei-101220101', 'Suzhou-101220701', 'Huibei-101221201', 'Fuyang-101220801', 'Bengbu-101220201', 'Huainan-101220401', 'Chuzhou- 101221101', 'Ma'anshan-101220501', 'Wuhu-101220301', 'Tongling-101221301', 'Anqing-101220601', 'Huangshan-101221008', 'Lu'an-101221501', 'Chaohu-10122126010', 'Chichi ', 'Xuancheng-101221401');
cities['Fujian Province'] = new Array('Fuzhou-101230101', 'Nanping-101230901', 'Sanming-101230801', 'Putian-101230401', 'Quanzhou-101230501', 'Xiamen-101230201', 'Zhangzhou- 101230601', 'Longyan-101230701', 'Ningde-101230301');
cities['Jiangxi Province'] = new Array('Nanchang-101240101', 'Jiujiang-101240201', 'Jingdezhen-101240801', 'Yingtan-101241101', 'Xinyu-101241001', 'Pingxiang-101240901', 'Ganzhou- 101240701', 'Shangrao-101240301', 'Fuzhou-101240401', 'Yichun-101240501', 'Jian-101240601');
cities['Shandong Province'] = new Array('Jinan-101120101', 'Liaocheng-101121701', 'Dezhou-101120401', 'Dongying-101121201', 'Zibo-101120301', 'Weifang-101120601', 'Yantai- 101120501', 'Weihai-101121301', 'Qingdao-101120201','Rizhao-101121501', 'Linyi-101120901', 'Zaozhuang-101121401', 'Jining-101120701', 'Taian-101120801', 'Laiwu-10801' , 'Binzhou-101121101', 'Heze-101121001');
cities['Henan Province'] = new Array('Zhengzhou-101180101', 'Sanmenxia-101181701', 'Luoyang-101180901', 'Jiaozuo-101181101', 'Xinxiang-101180301', 'Hebi-101181201', 'Anyang- 101180201', 'Puyang-101181301', 'Kaifeng-101180801', 'Shangqiu-101181001', 'Xuchang-101180401', 'Luohe-101181501', 'Pingdingshan-101180501', 'Nanyang-1011180701', 'Nanyang-1011180701' , 'Zhoukou-101181401', 'Zumadian-101181601');
cities['Hubei Province'] = new Array('Wuhan-101200101', 'Shiyan-101201101', 'Xiangfan-101200201', 'Jingmen-101201401', 'Xiaogan-101200401', 'Huanggang-101200501', 'Ezhou- 101200301', 'Huangshi-101200601', 'Xianning-101200701', 'Jingzhou-101200801', 'Yichang-101200901', 'Enshi-101201001');
cities['Hunan Province'] = new Array('Changsha-101250101', 'Zhangjiajie-101251101', 'Changde-101250601', 'Yiyang-101250700', 'Yueyang-101251001', 'Zhuzhou-101250301', 'Xiangtan- 101250201', 'Hengyang-101250401','Chenzhou-101250501', 'Yongzhou-101251401', 'Shaoyang-101250901', 'Huaihua-101251201', 'Loudi-101250801');
cities['Guangdong Province'] = new Array('Guangzhou-101280101', 'Qingyuan-101281301', 'Shaoguan-101280201', 'Heyuan-101281201', 'Meizhou-101280401', 'Chaozhou-101281501', 'Shantou- 101280501', 'Jieyang-101281901', 'Shantui-101282101','Huizhou-101280301', 'Dongguan-101281601', 'Shenzhen-101280601', 'Zhuhai-101280701', 'Jiangmen-101281101'000, 'Foshan- , 'Zhaoqing-101280901', 'Yunfu-101281401', 'Yangjiang-101281801', 'Maoming-101282001', 'Zhanjiang-101281001');
cities['Hainan Province'] = new Array('Haikou-101310101', 'Sanya-101310201');
cities['Sichuan Province'] = new Array('Chengdu-101270101', 'Guangyuan-101272101', 'Mianyang-101270401', 'Deyang-101272001', 'Nanchong-101270501', 'Guangan-101270801', 'Suining- 101270701', 'Neijiang-101271201', 'Leshan-101271401', 'Zigong-101270301', 'Luzhou-101271001', 'Yibin-101271101', 'Panzhihua-101270201', 'Bazhong-101270901', 'Dachuan-101270901', 101270607', 'Ziyang-101271301', 'Meishan-101271501', 'Ya'an-101271701', 'Aba-101271901', 'Ganzi-101271801', 'Liangshan-101271601');
cities['Guizhou Province'] = new Array('Guiyang-101260101', 'Liupanshui-101260801', 'Zunyi-101260201', 'Bijie-101260701', 'Tongren-101260601', 'Anshun-101260301', 'Qianxi -101260901');
cities['Yunnan Province'] = new Array('Kunming-101290101', 'Qujing-101290401', 'Yuxi-101290701', 'Lijiang-101291401', 'Zhaotong-101291001', 'Lincang-101291101', 'Baoshan -101290501', 'Dehong-101291501','Nujiang-101291201', 'Dali-101290201', 'Chuxiong-101290801', 'Honghe-101290301', 'Wenshan-101290601', 'Shangri-La-101291301');
cities['Shaanxi Province'] = new Array('Xi'an-101110101', 'Yan'an-101110300', 'Tongchuan-101111001', 'Weinan-101110501', 'Xianyang-101110200', 'Baoji-101110901', 'Hanzhong- 101110801', 'Yulin-101110401', 'Shangluo-101110601', 'Ankang-101110701');
cities['Gansu Province'] = new Array('Lanzhou-101160101', 'Jinchang-101160601', 'Baiyin-101161301', 'Tianshui-101160901', 'Jiuquan-101160801', 'Zhangye-101160701', 'Wuwei- 101160501', 'Qingyang-101160401', 'Pingliang-101160301', 'Dingxi-101160201', 'Linxia-101161101', 'Gannan-101050204');
cities['Qinghai Province'] = new Array('Xining-101150101', 'Haidong-101150201', 'Hainan-101150401', 'Haixi-101150701', 'Haibei-101150801', 'Huangnan-101150301', 'Guoluo-101150501', 'Yushu-101150601');
cities['Inner Mongolia'] = new Array('Hohhot-101080101', 'Baotou-101080201', 'Wuhai-101080301', 'Chifeng-101080601', 'Hulunbuir-101081000', 'Ordos-101080701', 'Bayan Norgon-101081209');
cities['Guangxi'] = new Array('Nanning-101300101', 'Guilin-101300501', 'Liuzhou-101300301', 'Wuzhou-101300601', 'Guigang-101300801', 'Yulin-101300901', 'Qinzhou-101301101 ', 'Beihai-101301301', 'Fangchenggang-101301401', 'Baise-101301001', 'Hechi-101301201', 'Hezhou-101300701');
cities['Tibet'] = new Array('Lhasa-101140101', 'Nagqu-101140601', 'Qamdo-101140501', 'Nyingchi-101140401', 'Shannan-101140301', 'Shigatse-101140201', 'Ali-101140701 ');
cities['Ningxia'] = new Array('Yinchuan-101170101', 'Shizuishan-101170201', 'Wuzhong-101170301', 'Guyuan-101170401');
cities['Xinjiang'] = new Array('Urumqi-101130101', 'Karamay-101130201', 'Kashi-101130901', 'Akesu-101130801', 'Hotian-101131301', 'Turpan-101130501', 'Hami-101131201 ', 'Changji-101130401', 'Bayinbulak-101130610', 'Tacheng-101131101', 'Altai-101131401');
cities['Hong Kong'] = new Array('Hong Kong-101320101');
cities['Macau'] = new Array('Macau-101330101');
function set_city(province, city) {
var pv, cv;
var i, ii;
pv = province.value;
cv = city.value;
city.length = 1;
if (pv == '0')
return;
if (typeof (cities[pv]) == 'undefined')
return;
for (i = 0; i < cities[pv].length; i++) {
ii = i + 1;
city.options[ii] = new Option();
//assign option
//city.options[ii].text = cities[pv][i];
//city.options[ii].value = cities[pv][i];
// Divide the city into an array
var strs= cities[pv][i].split("-")
city.options[ii].text = strs[0];
city.options[ii].value = strs[1];
}
}
//check the weather
function findWeather(){
//city code
var cityCode = $("#city").val();
$.ajax({
type: "post",
url: "ChinaWeatherServlet",
data: {cityCode:cityCode},
success: function(data){
//Convert the returned data to json
var parsedJson = jQuery.parseJSON (data);
$("#ctiyWeath").html("<img src='img/"+parsedJson.img1+"'> <img src='img/"+parsedJson.img2+"'> "+parsedJson.weather+" ");
}
});
}
</script>
</head>
<body>
<SELECT name="sheng" id="to_cn" onchange="set_city(this, document.getElementById('city'));" >
<option value=0>Please select</option>
<option value=Beijing>Beijing</option>
<option value=Shanghai>Shanghai</option>
<option value=Tianjin>Tianjin</option>
<option value=Chongqing>Chongqing</option>
<option value=Hebei>Hebei</option>
<option value=Shanxi Province>Shanxi Province</option>
<option value=Liaoning Province>Liaoning Province</option>
<option value=Jilin Province>Jilin Province</option>
<option value=Heilongjiang Province>Heilongjiang Province</option>
<option value=Jiangsu Province>Jiangsu Province</option>
<option value=Zhejiang Province>Zhejiang Province</option>
<option value=Anhui>Anhui</option>
<option value=Fujian Province>Fujian Province</option>
<option value=Jiangxi Province>Jiangxi Province</option>
<option value=Shandong Province>Shandong Province</option>
<option value=Henan Province>Henan Province</option>
<option value=Hubei>Hubei</option>
<option value=Hunan Province>Hunan Province</option>
<option value=Guangdong Province>Guangdong Province</option>
<option value=Hainan>Hainan</option>
<option value=Sichuan Province>Sichuan Province</option>
<option value=Guizhou Province>Guizhou Province</option>
<option value=Yunnan Province>Yunnan Province</option>
<option value=Shaanxi Province>Shaanxi Province</option>
<option value=Gansu Province>Gansu Province</option>
<option value=Qinghai Province>Qinghai Province</option>
<option value=Inner Mongolia>Inner Mongolia</option>
<option value=Guangxi>Guangxi</option>
<option value=Tibet>Tibet</option>
<option value=Ningxia>Ningxia</option>
<option value=Xinjiang>Xinjiang</option>
<option value=Hong Kong>Hong Kong</option>
<option value=Macau>Macau</option>
</SELECT>
- city
<select id="city" class=login_text_input name="shi">
<option value=0>Please select</option>
</select>
<span id="ctiyWeath">
</span>
<input type="button" value="查看天气" onclick="findWeather()">
</body>
</html>
Attachment: All city codes and weather forecast test items of China Weather Network