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 ">

Related articles: