 
<!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>省市兩級(jí)聯(lián)動(dòng)選擇</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庫(kù)文件引入 --> 
<script language="javascript" type="text/javascript" src="JS/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" language="javascript"> 
//定義數(shù)組，存儲(chǔ)省份信息 
var province = ["北京", "上海", "天津", "重慶", "浙江", "江蘇", "廣東", "福建", "湖南", "湖北", "遼寧", 
"吉林", "黑龍江", "河北", "河南", "山東", "陜西", "甘肅", "新疆", "青海", "山西", "四川", 
"貴州", "安徽", "江西", "云南", "內(nèi)蒙古", "西藏", "廣西", "寧夏", "海南", "香港", "澳門(mén)", "臺(tái)灣"]; 

//定義數(shù)組,存儲(chǔ)城市信息 
var beijing = ["東城區(qū)", "西城區(qū)", "海淀區(qū)", "朝陽(yáng)區(qū)", "豐臺(tái)區(qū)", "石景山區(qū)", "通州區(qū)", "順義區(qū)", "房山區(qū)", "大興區(qū)", "昌平區(qū)", "懷柔區(qū)", "平谷區(qū)", "門(mén)頭溝區(qū)", "延慶縣", "密云縣"]; 
var shanghai = ["浦東新區(qū)", "徐匯區(qū)", "長(zhǎng)寧區(qū)", "普陀區(qū)", "閘北區(qū)", "虹口區(qū)", "楊浦區(qū)", "黃浦區(qū)", "盧灣區(qū)", "靜安區(qū)", "寶山區(qū)", "閔行區(qū)", "嘉定區(qū)", "金山區(qū)", "松江區(qū)", "青浦區(qū)", "南匯區(qū)", "奉賢區(qū)", "崇明縣"]; 
var tianjing = ["河?xùn)|", "南開(kāi)", "河西", "河北", "和平", "紅橋", "東麗", "津南", "西青", "北辰", "塘沽", "漢沽", "大港", "薊縣", "寶坻", "寧河", "靜海", "武清"]; 
var chongqing = ["渝中區(qū)", "大渡口區(qū)", "江北區(qū)", "沙坪壩區(qū)", "九龍坡區(qū)", "南岸區(qū)", "北碚區(qū)", "萬(wàn)盛區(qū)", "雙橋區(qū)", "渝北區(qū)", "巴南區(qū)", "萬(wàn)州區(qū)", "涪陵區(qū)", "黔江區(qū)", "長(zhǎng)壽區(qū)", "江津區(qū)", "合川區(qū)", "永川區(qū)", "南川區(qū)"]; 
var jiangsu = ["南京", "無(wú)錫", "常州", "徐州", "蘇州", "南通", "連云港", "淮安", "揚(yáng)州", "鹽城", "鎮(zhèn)江", "泰州", "宿遷"]; 
var zhejiang = ["杭州", "寧波", "溫州", "嘉興", "湖州", "紹興", "金華", "衢州", "舟山", "臺(tái)州", "利水"]; 
var guangdong = ["廣州", "韶關(guān)", "深圳", "珠海", "汕頭", "佛山", "江門(mén)", "湛江", "茂名", "肇慶", "惠州", "梅州", "汕尾", "河源", "陽(yáng)江", "清遠(yuǎn)", "東莞", "中山", "潮州", "揭陽(yáng)"]; 
var fujiang = ["福州", "廈門(mén)", "莆田", "三明", "泉州", "漳州", "南平", "龍巖", "寧德"]; 
var hunan = ["長(zhǎng)沙", "株洲", "湘潭", "衡陽(yáng)", "邵陽(yáng)", "岳陽(yáng)", "常德", "張家界", "益陽(yáng)", "郴州", "永州", "懷化", "婁底", "湘西土家苗族自治區(qū)"]; 
var hubei = ["武漢", "襄陽(yáng)", "黃石", "十堰", "宜昌", "鄂州", "荊門(mén)", "孝感", "荊州", "黃岡", "咸寧", "隨州", "恩施土家族苗族自治州"]; 
var liaoning = ["沈陽(yáng)", "大連", "鞍山", "撫順", "本溪", "丹東", "錦州", "營(yíng)口", "阜新", "遼陽(yáng)", "盤(pán)錦", "鐵嶺", "朝陽(yáng)", "葫蘆島"]; 
var jilin = ["長(zhǎng)春", "吉林", "四平", "遼源", "通化", "白山", "松原", "白城", "延邊朝鮮族自治區(qū)"]; 
var heilongjiang = ["哈爾濱", "齊齊哈爾", "雞西", "牡丹江", "佳木斯", "大慶", "伊春", "黑河", "大興安嶺"]; 
var hebei = ["石家莊", "保定", "唐山", "邯鄲", "承德", "廊坊", "衡水", "秦皇島", "張家口"]; 
var henan = ["鄭州", "洛陽(yáng)", "商丘", "安陽(yáng)", "南陽(yáng)", "開(kāi)封", "平頂山", "焦作", "新鄉(xiāng)", "鶴壁", "許昌", "漯河", "三門(mén)峽", "信陽(yáng)", "周口", "駐馬店", "濟(jì)源"]; 
var shandong = ["濟(jì)南", "青島", "菏澤", "淄博", "棗莊", "東營(yíng)", "煙臺(tái)", "濰坊", "濟(jì)寧", "泰安", "威海", "日照", "濱州", "德州", "聊城", "臨沂"]; 
var shangxi = ["西安", "寶雞", "咸陽(yáng)", "渭南", "銅川", "延安", "榆林", "漢中", "安康", "商洛"]; 
var gansu = ["蘭州", "嘉峪關(guān)", "金昌", "金川", "白銀", "天水", "武威", "張掖", "酒泉", "平?jīng)?, "慶陽(yáng)", "定西", "隴南", "臨夏", "合作"]; 
var qinghai = ["西寧", "海東地區(qū)", "海北藏族自治州", "黃南藏族自治州", "海南藏族自治州", "果洛藏族自治州", "玉樹(shù)藏族自治州", "海西蒙古族藏族自治州"]; 
var xinjiang = ["烏魯木齊", "奎屯", "石河子", "昌吉", "吐魯番", "庫(kù)爾勒", "阿克蘇", "喀什", "伊寧", "克拉瑪依", "塔城", "哈密", "和田", "阿勒泰", "阿圖什", "博樂(lè)"]; 
var shanxi = ["太原", "大同", "陽(yáng)泉", "長(zhǎng)治", "晉城", "朔州", "晉中", "運(yùn)城", "忻州", "臨汾", "呂梁"]; 
var sichuan = ["成都", "自貢", "攀枝花", "瀘州", "德陽(yáng)", "綿陽(yáng)", "廣元", "遂寧", "內(nèi)江", "樂(lè)山", "南充", "眉山", "宜賓", "廣安", "達(dá)州", "雅安", "巴中", "資陽(yáng)", "阿壩藏族羌族自治州", "甘孜藏族自治州", "涼山彝族自治州"]; 
var guizhou = ["貴陽(yáng)", "六盤(pán)水", "遵義", "安順", "黔南布依族苗族自治州", "黔西南布依族苗族自治州", "黔東南苗族侗族自治州", "銅仁", "畢節(jié)"]; 
var anhui = ["合肥", "蕪湖", "安慶", "馬鞍山", "阜陽(yáng)", "六安", "滁州", "宿州", "蚌埠", "巢湖", "淮南", "宣城", "亳州", "淮北", "銅陵", "黃山", "池州"]; 
var jiangxi = ["南昌", "九江", "景德鎮(zhèn)", "萍鄉(xiāng)", "新余", "鷹潭", "贛州", "宜春", "上饒", "吉安", "撫州"]; 
var yunnan = ["昆明", "曲靖", "玉溪", "保山", "昭通", "麗江", "普洱", "臨滄", "楚雄彝族自治州", "大理白族自治州", "紅河哈尼族彝族自治州", "文山壯族苗族自治州", "西雙版納傣族自治州", "德宏傣族景頗族自治州", "怒江傈僳族自治州", "迪慶藏族自治州"]; 
var neimenggu = ["呼和浩特", "包頭", "烏海", "赤峰", "通遼", "鄂爾多斯", "呼倫貝爾", "巴彥淖爾", "烏蘭察布"]; 
var guangxi = ["南寧", "柳州", "桂林", "梧州", "北海", "防城港", "欽州", "貴港", "玉林", "百色", "賀州", "河池", "崇左"]; 
var xizang = ["拉薩", "昌都地區(qū)", "林芝地區(qū)", "山南地區(qū)", "日喀則地區(qū)", "那曲地區(qū)", "阿里地區(qū)"]; 
var ningxia = ["銀川", "石嘴山", "吳忠", "固原", "中衛(wèi)"]; 
var hainan = ["?？?, "三亞"]; 
var xianggang = ["中西區(qū)", "灣仔區(qū)", "東區(qū)", "南區(qū)", "九龍城區(qū)", "油尖旺區(qū)", "觀塘區(qū)", "黃大仙區(qū)", "深水埗區(qū)", "北區(qū)", "大埔區(qū)", "沙田區(qū)", "西貢區(qū)", "元朗區(qū)", "屯門(mén)區(qū)", "荃灣區(qū)", "葵青區(qū)", "離島區(qū)"]; 
var taiwan = ["臺(tái)北", "高雄", "基隆", "臺(tái)中", "臺(tái)南", "新竹", "嘉義"]; 
var aomeng = ["澳門(mén)半島", "氹仔島", "路環(huán)島"]; 

//頁(yè)面加載方法 
$(function () { 
//設(shè)置省份數(shù)據(jù) 
setProvince(); 

//設(shè)置背景顏色 
setBgColor(); 
}); 


//設(shè)置省份數(shù)據(jù) 
function setProvince() { 
//給省份下拉列表賦值 
var option, modelVal; 
var $sel = $("#selProvince"); 

//獲取對(duì)應(yīng)省份城市 
for (var i = 0, len = province.length; i < len; i++) { 
modelVal = province[i]; 
option = "<option value='" + modelVal + "'>" + modelVal + "</option>"; 

//添加到 select 元素中 
$sel.append(option); 
} 

//調(diào)用change事件，初始城市信息 
provinceChange(); 
} 


//根據(jù)選中的省份獲取對(duì)應(yīng)的城市 
function setCity(provinec) { 
var $city = $("#selCity"); 
var proCity, option, modelVal; 

//通過(guò)省份名稱，獲取省份對(duì)應(yīng)城市的數(shù)組名 
switch (provinec) { 
case "北京": 
proCity = beijing; 
break; 
case "上海": 
proCity = shanghai; 
break; 
case "天津": 
proCity = tianjing; 
break; 
case "重慶": 
proCity = chongqing; 
break; 
case "浙江": 
proCity = zhejiang; 
break; 
case "江蘇": 
proCity = jiangsu; 
break; 
case "廣東": 
proCity = guangdong; 
break; 
case "福建": 
proCity = fujiang; 
break; 
case "湖南": 
proCity = hunan; 
break; 
case "湖北": 
proCity = hubei; 
break; 
case "遼寧": 
proCity = liaoning; 
break; 
case "吉林": 
proCity = jilin; 
break; 
case "黑龍江": 
proCity = heilongjiang; 
break; 
case "河北": 
proCity = hebei; 
break; 
case "河南": 
proCity = henan; 
break; 
case "山東": 
proCity = shandong; 
break; 
case "陜西": 
proCity = shangxi; 
break; 
case "甘肅": 
proCity = gansu; 
break; 
case "新疆": 
proCity = xinjiang; 
break; 
case "青海": 
proCity = qinghai; 
break; 
case "山西": 
proCity = shanxi; 
break; 
case "四川": 
proCity = sichuan; 
break; 
case "貴州": 
proCity = guizhou; 
break; 
case "安徽": 
proCity = anhui; 
break; 
case "江西": 
proCity = jiangxi; 
break; 
case "云南": 
proCity = yunnan; 
break; 
case "內(nèi)蒙古": 
proCity = neimenggu; 
break; 
case "西藏": 
proCity = xizang; 
break; 
case "廣西": 
proCity = guangxi; 
break; 
case "": 
proCity = xizang; 
break; 
case "寧夏": 
proCity = ningxia; 
break; 
case "海南": 
proCity = hainan; 
break; 
case "香港": 
proCity = xianggang; 
break; 
case "澳門(mén)": 
proCity = aomeng; 
break; 
case "臺(tái)灣": 
proCity = taiwan; 
break; 
} 

//先清空之前綁定的值 
$city.empty(); 

//設(shè)置對(duì)應(yīng)省份的城市 
for (var i = 0, len = proCity.length; i < len; i++) { 
modelVal = proCity[i]; 
option = "<option value='" + modelVal + "'>" + modelVal + "</option>"; 

//添加 
$city.append(option); 
} 

//設(shè)置背景 
setBgColor(); 
} 


//省份選中事件 
function provinceChange() { 
var $pro = $("#selProvince"); 
setCity($pro.val()); 
} 


//設(shè)置下拉列表間隔背景樣色 
function setBgColor() { 
var $option = $("select option:odd"); 
$option.css({ "background-color": "#DEDEDE" }); 
} 
</script> 
</head> 
<body> 
<fieldset> 
<legend>中國(guó)三級(jí)行政單位聯(lián)動(dòng)</legend> 
<dl> 
<dd> 
省 份：<select id="selProvince" onchange="provinceChange();"></select> 
</dd> 
<dd> 
市(區(qū))：<select id="selCity"></select> 
</dd> 
</dl> 
</fieldset> 
</body> 
</html> 