JQuery China provinces and cities two levels of linkage selection attached
- 2020-03-30 02:57:56
- OfStack
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Provincial and municipal linkage selection </title>
<style type="text/css">
select
{
width: 135px;
}
fieldset dl dd
{
float: left;
margin-left: 20px;
}
fieldset pre
{
width: 100%;
height: 400px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
<!-- jQuery Library file import -->
<script language="javascript" type="text/javascript" src="JS/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
//Defines an array to store the province information
var province = [" Beijing ", " Shanghai ", " tianjin ", " chongqing ", " zhejiang ", " jiangsu ", " guangdong ", " fujian ", " hunan ", " hubei ", " liaoning ",
" Ji Lin ", " heilongjiang ", " hebei ", " henan ", " shandong ", " shaanxi ", " gansu ", " xinjiang ", " qinghai ", " shanxi ", " sichuan ",
" guizhou ", " anhui ", " jiangxi ", " yunnan ", " Inner Mongolia ", " Tibet ", " guangxi ", " ningxia ", " hainan ", " Hong Kong ", " Macau ", " Taiwan "];
//Defines an array to store city information
var beijing = [" The dongcheng district ", " Xicheng district ", " Haidian district, ", " Chaoyang district ", " Fengtai district ", " The shijingshan district ", " Tongzhou district ", " Shunyi district ", " Fangshan district ", " Daxing district ", " Changping district ", " Huairou district ", " Pinggu district ", " Mentougou district ", " Yanqing county ", " Miyun county "];
var shanghai = [" Pudong new area ", " Xuhui district ", " Changning district ", " Putuo district ", " zhabei ", " Hongkou district ", " Yangpu district ", " Huangpu district ", " Luwan district ", " Jing'an District ", " Baoshan district ", " Minhang district ", " Jiading district, ", " jinshan ", " Songjiang district ", " Qingpu, ", " Nanhui district ", " The district ", " for "];
var tianjing = [" hedong ", " nankai ", " hexi ", " hebei ", " peace ", " Red bridge ", " toray ", " jinnan ", " West green ", " beichen ", " tanggu ", " hangu ", " dagang ", " jixian ", " baodi ", " NingHe ", " The sea of tranquility ", " qing "];
var chongqing = [" Yuzhong district ", " Dadukou district ", " jiangbei ", " Shapingba district ", " Jiulongpo district ", " Nanan distract ", " beibei ", " wansheng ", " Double bridge ", " Yubei District ", " banan ", " Wanzhou district ", " fuling ", " qianjiang ", " Longevity area ", " metro ", " Ocean area ", " Yongchuan district ", " The nanchuan district "];
var jiangsu = [" nanjing ", " wuxi ", " changzhou ", " xuzhou ", " suzhou ", " nantong ", " lianyungang ", " huaian ", " yangzhou ", " yancheng ", " zhenjiang ", " taizhou ", " suqian "];
var zhejiang = [" hangzhou ", " ningbo ", " wenzhou ", " jiaxing ", " huzhou ", " shaoxing ", " jinhua ", " quzhou ", " zhoushan ", " taizhou ", " The water "];
var guangdong = [" Guangzhou ", " shaoguan ", " shenzhen ", " zhuhai ", " shantou ", " foshan ", " jiangmen ", " zhanjiang ", " maoming ", " zhaoqing ", " huizhou ", " meizhou ", " shanwei ", " heyuan ", " yangjiang ", " qingyuan ", " dongguan ", " zhongshan ", " chaozhou ", " jieyang "];
var fujiang = [" fuzhou ", " xiamen ", " putian ", " sanming ", " quanzhou ", " zhangzhou ", " nanping ", " longyan ", " ningde "];
var hunan = [" changsha ", " zhuzhou ", " xiangtan ", " hengyang ", " shaoyang ", " yueyang ", " changde ", " zhangjiajie ", " yiyang ", " chenzhou ", " yongzhou ", " Which is ", " loudi ", " Xiangxi tujia miao autonomous region "];
var hubei = [" wuhan ", " xiangyang ", " Yellowstone ", " shiyan ", " yichang ", " ezhou ", " jingmen ", " xiaogan ", " jingzhou ", " huanggang ", " xianning ", " suizhou ", " Enshi tujia and miao autonomous prefecture "];
var liaoning = [" shenyang ", " dalian ", " anshan ", " fushun ", " benxi ", " dandong ", " jinzhou ", " yingkou ", " fuxin ", " liaoyang ", " Set up a file ", " tieling ", " The rising sun ", " huludao "];
var jilin = [" changchun ", " Ji Lin ", " siping ", " long-withering ", " tonghua ", " baishan ", " matsubara ", " baicheng ", " Yanbian Korean autonomous region "];
var heilongjiang = [" Harbin ", " qiqihar ", " jixi ", " mudanjiang ", " jiamusi ", " daqing ", " yichun ", " Heihe river ", " Greater hinggan mountains "];
var hebei = [" shijiazhuang ", " baoding ", " tangshan ", " handan ", " chengde ", " langfang ", " hengshui ", " qinhuangdao ", " zhangjiakou "];
var henan = [" zhengzhou ", " luoyang ", " shangqiu ", " anyang ", " nanyang ", " kaifeng ", " pingdingshan ", " jiaozuo ", " xinxiang ", " hebi ", " xuchang ", " Luo river ", " sanmenxia ", " xinyang ", " zhoukou ", " zhumadian ", " jiyuan "];
var shandong = [" jinan ", " Qingdao ", " heze ", " zibo ", " zaozhuang ", " dongying ", " yantai ", " weifang ", " jining ", " taian ", " weihai ", " rizhao ", " binzhou ", " Texas ", " liaocheng ", " linyi "];
var shangxi = [" Xi 'an ", " baoji ", " xianyang ", " weinan ", " tongchuan ", " yanan ", " Yulin. ", " Hanzhong city ", " ankang ", " shangluo "];
var gansu = [" lanzhou ", " jiayuguan ", " jinchang ", " jinchuan ", " silver ", " tianshui ", " wuwei ", " Zhang ye ", " jiuquan ", " Of out ", " qingyang ", " dingxi ", " longnan ", " linxia ", " cooperation "];
var qinghai = [" xining ", " Whereas haidong539 area ", " Haibei Tibetan autonomous prefecture ", " Huangnan Tibetan autonomous prefecture ", " Hainan Tibetan autonomous prefecture ", " Guoluo Tibetan autonomous prefecture ", " Yushu Tibetan autonomous prefecture ", " Haixi Mongolian Tibetan autonomous prefecture "];
var xinjiang = [" urumqi ", " kuytun ", " shihezi ", " changji ", " turpan ", " korla ", " aksu ", " kashgar ", " yining ", " karamay ", " Tacheng prefecture ", " hami ", " hetian ", " altay ", " What figure o ", " Bo le "];
var shanxi = [" taiyuan ", " datong ", " yangquan ", " changzhi ", " jincheng ", " It is mined here ", " jinzhong ", " yuncheng ", " xinzhou ", " linfen ", " luliang "];
var sichuan = [" chengdu ", " zigong ", " panzhihua ", " luzhou ", " deyang ", " mianyang ", " guangyuan ", " suining ", " neijiang ", " leshan ", " nanchong ", " meishan ", " yibin ", " cross ", " dazhou ", " ya ", " pakistan-china ", " great ", " Aba Tibetan and qiang autonomous prefecture ", " Ganzi Tibetan autonomous prefecture ", " Liangshan yi autonomous prefecture "];
var guizhou = [" guiyang ", " liupanshui ", " zunyi ", " anshun ", " Qiannan buyi and miao autonomous prefecture ", " Guizhou southwest buyi miao autonomous prefecture ", " Qiandongnan miao and dong autonomous prefecture ", " tongren ", " bijie "];
var anhui = [" hefei ", " wuhu ", " anqing ", " Ma on shan ", " fuyang ", " luan ", " chuzhou ", " suzhou ", " bengbu ", " Chaohu lake ", " huainan ", " xuancheng ", " bozhou ", " huaibei ", " tongling ", " huangshan ", " chizhou "];
var jiangxi = [" nanchang ", " jiujiang ", " jingdezhen ", " pingxiang ", " at ", " yingtan ", " ganzhou ", " yichun ", " shangrao ", " gian ", " fuzhou "];
var yunnan = [" kunming ", " qujing ", " yuxi ", " baoshan ", " zhaotong ", " lijiang ", " pu ", " lincang ", " Chuxiong yi autonomous prefecture ", " Dali bai autonomous prefecture ", " Honghe hani and yi autonomous prefecture ", " Wenshan zhuang and miao autonomous prefecture ", " Xishuangbanna dai autonomous prefecture ", " Dehong dai jingpo autonomous prefecture ", " Nujiang lisu autonomous prefecture ", " Diqing Tibetan autonomous prefecture "];
var neimenggu = [" Hohhot, ", " baotou ", " The wuhai ", " chifeng ", " tgo ", " ordos ", " The hulunbuir ", " bayinnaoer ", " wulanchabu "];
var guangxi = [" nanning ", " liuzhou ", " guilin ", " wuzhou ", " The north sea ", " fangchenggang ", " qinzhou ", " Your port ", " yulin ", " The baise ", " Congratulation state ", " hechi ", " The left part "];
var xizang = [" Lhasa ", " Changdu area ", " nyingchi ", " shannan ", " Xigaze area ", " In naqu ", " ali "];
var ningxia = [" yinchuan ", " making ", " hui ", " evalution ", " Central defender "];
var hainan = [" haikou ", " sanya "];
var xianggang = [" And western ", " Wan chai ", " east area ", " The southern district ", " Kowloon city ", " Yau tsim mong district ", " Kwun tong district ", " Wong tai sin district, ", " The deepwater � area ", " North district ", " Tai Po district ", " The sha tin district ", " Sai kung district ", " Yuen long ", " Tuen mun ", " Tsuen wan ", " Kwai tsing district ", " The outlying islands district "];
var taiwan = [" Taipei ", " Geohiong (kaohsiung) ", " keelung ", " taichung ", " tainan ", " hsinchu ", " chiayi "];
var aomeng = [" The macau peninsula ", " � island ", " coloane "];
//Page loading method
$(function () {
//Set the province data
setProvince();
//Set the background color
setBgColor();
});
//Set the province data
function setProvince() {
//Assign a value to the province drop-down list
var option, modelVal;
var $sel = $("#selProvince");
//Get the corresponding province city
for (var i = 0, len = province.length; i < len; i++) {
modelVal = province[i];
option = "<option value='" + modelVal + "'>" + modelVal + "</option>";
//Add to the select element
$sel.append(option);
}
//Call the change event, the initial city information
provinceChange();
}
//Gets the corresponding city according to the selected province
function setCity(provinec) {
var $city = $("#selCity");
var proCity, option, modelVal;
//Gets the array name of the city for the province by the name of the province
switch (provinec) {
case " Beijing ":
proCity = beijing;
break;
case " Shanghai ":
proCity = shanghai;
break;
case " tianjin ":
proCity = tianjing;
break;
case " chongqing ":
proCity = chongqing;
break;
case " zhejiang ":
proCity = zhejiang;
break;
case " jiangsu ":
proCity = jiangsu;
break;
case " guangdong ":
proCity = guangdong;
break;
case " fujian ":
proCity = fujiang;
break;
case " hunan ":
proCity = hunan;
break;
case " hubei ":
proCity = hubei;
break;
case " liaoning ":
proCity = liaoning;
break;
case " Ji Lin ":
proCity = jilin;
break;
case " heilongjiang ":
proCity = heilongjiang;
break;
case " hebei ":
proCity = hebei;
break;
case " henan ":
proCity = henan;
break;
case " shandong ":
proCity = shandong;
break;
case " shaanxi ":
proCity = shangxi;
break;
case " gansu ":
proCity = gansu;
break;
case " xinjiang ":
proCity = xinjiang;
break;
case " qinghai ":
proCity = qinghai;
break;
case " shanxi ":
proCity = shanxi;
break;
case " sichuan ":
proCity = sichuan;
break;
case " guizhou ":
proCity = guizhou;
break;
case " anhui ":
proCity = anhui;
break;
case " jiangxi ":
proCity = jiangxi;
break;
case " yunnan ":
proCity = yunnan;
break;
case " Inner Mongolia ":
proCity = neimenggu;
break;
case " Tibet ":
proCity = xizang;
break;
case " guangxi ":
proCity = guangxi;
break;
case "":
proCity = xizang;
break;
case " ningxia ":
proCity = ningxia;
break;
case " hainan ":
proCity = hainan;
break;
case " Hong Kong ":
proCity = xianggang;
break;
case " Macau ":
proCity = aomeng;
break;
case " Taiwan ":
proCity = taiwan;
break;
}
//Clear the previously bound value
$city.empty();
//Set the city of the corresponding province
for (var i = 0, len = proCity.length; i < len; i++) {
modelVal = proCity[i];
option = "<option value='" + modelVal + "'>" + modelVal + "</option>";
// add
$city.append(option);
}
//Set the background
setBgColor();
}
//Province select event
function provinceChange() {
var $pro = $("#selProvince");
setCity($pro.val());
}
//Sets the drop-down list spacing of the background sample color
function setBgColor() {
var $option = $("select option:odd");
$option.css({ "background-color": "#DEDEDE" });
}
</script>
</head>
<body>
<fieldset>
<legend> China's three administrative units linkage </legend>
<dl>
<dd>
province A: <select id="selProvince" onchange="provinceChange();"></select>
</dd>
<dd>
The city ( area ) : <select id="selCity"></select>
</dd>
</dl>
</fieldset>
</body>
</html>
The effect drawing is as follows:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405140931543.gif? 201441493210 ">
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405140932394.gif? 201441493252 ">