js实现的省市联动
? ? ? ?最近工作，要用到省市聯(lián)動的功能。網(wǎng)上搜了一下，發(fā)現(xiàn)有很多這樣的例子，看了不少實例，把覺得寫得不錯的代碼穿上來，好給大家分享一下。
? ? ??<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS省份三級聯(lián)動</title>
</head>
<body>
<form action="" method="get">
<select name="province" id="province">
<option value="省份" selected="selected">省份</option>
</select>
<select name="city" id="city">
<option value="城市" selected="selected">市縣</option>
</select>
</form>
<script type="text/javascript">
var province = document.getElementById('province');
var city ? ? = document.getElementById('city');
//省份
var provinceArr = [];
provinceArr[0] = ['北京市'];
provinceArr[1] = ['天津市'];
provinceArr[2] = ['上海市'];
provinceArr[3] = ['重慶市'];
provinceArr[4] = ['河北省'];
provinceArr[5] = ['河南省'];
provinceArr[6] = ['云南省'];
provinceArr[7] = ['遼寧省'];
provinceArr[8] = ['黑龍江省'];?
provinceArr[9] = ['湖南省'];?
provinceArr[10] = ['安徽省'];
provinceArr[11] = ['山東省'];
provinceArr[12] = ['新疆維吾爾自治區(qū)'];?
provinceArr[13] = ['江蘇省'];
provinceArr[14] = ['浙江省'];
provinceArr[15] = ['江西省'];
provinceArr[16] = ['湖北省'];
provinceArr[17] = ['廣西壯族'];
provinceArr[18] = ['甘肅省'];
provinceArr[19] = ['山西省'];
provinceArr[20] = ['內蒙古自治區(qū)'];
provinceArr[21] = ['陜西省'];
provinceArr[22] = ['吉林省'];
provinceArr[23] = ['福建省'];
provinceArr[24] = ['貴州省'];
provinceArr[25] = ['廣東省'];
provinceArr[26] = ['青海省'];
provinceArr[27] = ['西藏'];
provinceArr[28] = ['四川省'];
provinceArr[29] = ['寧夏回族'];
provinceArr[30] = ['海南省'];
provinceArr[31] = ['臺灣省'];
provinceArr[32] = ['香港特別行政區(qū)'];
provinceArr[33] = ['澳門特別行政區(qū)'];
//市縣,每個數(shù)組第一個元素為省份,其他的為這個省份下的市縣
var cityArr = [];
cityArr[0] = ['北京市','東城區(qū)', '西城區(qū)','崇文區(qū)','宣武區(qū)','朝陽區(qū)','豐臺區(qū)','石景山區(qū)', '海淀區(qū)','門頭溝區(qū)', '房山區(qū)','通州區(qū)','順義區(qū)','昌平區(qū)','大興 區(qū)','懷柔區(qū)','平谷區(qū)','密云縣','延慶縣'];
cityArr[1] = ['天津市','和平區(qū)','河東區(qū)', '河西區(qū)', '南開區(qū)', '河北區(qū)', '紅橋區(qū)', '塘沽區(qū)', '漢沽區(qū)', '大港區(qū)', '東麗區(qū)', '西青區(qū)', '津南區(qū)', '北辰區(qū)', '武清區(qū)', '寶坻區(qū)', '寧河縣', '靜海縣', '薊縣'];?
cityArr[2] = ['上海市','黃浦區(qū)','盧灣區(qū)', '徐匯區(qū)','長寧區(qū)','靜安區(qū)','普陀區(qū)','閘北區(qū)','虹口區(qū)', '楊浦區(qū)', '閔行區(qū)', '寶山區(qū)', '嘉定區(qū)', '浦東新區(qū)', '金山區(qū)', '松江區(qū)', '青浦區(qū)', '南匯區(qū)', '奉賢區(qū)', '崇明縣'];?
cityArr[3] = ['重慶市','萬州區(qū)','涪陵區(qū)','渝中區(qū)','大渡口區(qū)','江北區(qū)','沙坪壩區(qū)','九龍坡區(qū)','南岸區(qū)','北碚區(qū)','萬盛區(qū)','雙橋區(qū)','渝北區(qū)','巴南區(qū)','黔江區(qū)','長壽區(qū)','江津區(qū)','合川區(qū)','永川區(qū)','南川區(qū)','綦江縣','潼南縣','銅梁縣','大足縣','榮昌縣','璧山縣','梁平縣','城口縣','豐都縣','墊江縣','武隆縣','忠縣','開縣','云陽縣','奉節(jié)縣','巫山縣','巫溪縣','石柱土家族自治縣','秀山土家族苗族自治縣','酉陽土家族苗族自治縣','彭水苗族土家族自治縣'];?
cityArr[4] = ['河北省','石家莊市', '唐山市', '秦皇島市', '邯鄲市', '邢臺市', '保定市', '張家口市', '承德市', '滄州市', '廊坊市', '衡水市'];?
cityArr[5] = ['河南省','鄭州市','開封市','洛陽市', '平頂山市', '安陽市', '鶴壁市', '新鄉(xiāng)市', '焦作市', '濟源市', '濮陽市', '許昌市', '漯河市', '三門峽市', '南陽市', '商丘市', '信陽市', '周口市', '駐馬店市'];?
cityArr[6] = ['云南省','昆明市',' 曲靖市','玉溪市','保山市','昭通市','麗江市','思茅市','臨滄市','楚雄彝族自治州','紅河哈尼族彝族自治州','文山壯族苗族自治州','西雙版納傣族自治州','大理白族自治州','德宏傣族景頗族自治州','怒江傈僳族自治州','迪慶藏族自治州'];?
cityArr[7] = ['遼寧省','沈陽市' ,'大連市' ,'鞍山市' ,'撫順市' ,'本溪市' ,'丹東市' ,'錦州市' ,'營口市' ,'阜新市' ,'遼陽市' ,'盤錦市' ,'鐵嶺市' ,'朝陽市' ,'葫蘆島市'];?
cityArr[8] = ['黑龍江省','哈爾濱市','齊齊哈爾市','雞西市','鶴崗市','雙鴨山市', '大慶市', '伊春市', '佳木斯市', '七臺河市', '牡丹江市', '黑河市', '綏化市', '大興安嶺地區(qū)'];?
cityArr[9] = ['湖南省','長沙市', '株洲市','湘潭市', '衡陽市', '邵陽市', '岳陽市', '常德市', '張家界市', '益陽市', '郴州市', '永州市', '懷化市', '婁底市', '湘西土家族苗族自治州'];?
cityArr[10] = ['安徽省','合肥市', '蕪湖市', '蚌埠市', '淮南市', '馬鞍山市', '淮北市', '銅陵市', '安慶市', '黃山市', '滁州市','阜陽市','宿州市', '巢湖市', '六安市', '亳州市', '池州', '宣城市'];?
cityArr[11] = ['山東省','濟南市','青島市','淄博市','棗莊市','東營市','煙臺市','濰坊市','濟寧市','泰安市','威海市','日照市','萊蕪市','臨沂市','德州市','聊城市','濱州市','菏澤市'];
cityArr[12] = ['新疆維吾爾自治區(qū)','烏魯木齊市', '克拉瑪依市', '吐魯番地區(qū)', '哈密地區(qū)', '昌吉回族自治州 ', '博爾塔拉蒙古自治州 ', '巴音郭楞蒙古自治州 ', '阿克蘇地區(qū)', '克孜勒蘇柯爾克孜自治州 ', '喀什地區(qū)', '和田地區(qū)', '伊犁哈薩克自治州', '塔城地區(qū)', '阿勒泰地區(qū)', '石河子市', '阿拉爾市', '圖木舒克市', '五家渠市' ];?
cityArr[13] = ['江蘇省','南京市', '無錫市', '徐州市', '常州市', '蘇州市', '南通市', '連云港市', '淮安市', '鹽城市', '揚州市', '鎮(zhèn)江市', '泰州市', '宿遷市' ];
cityArr[14] = ['浙江省','杭州市', '寧波市', '溫州市', '嘉興市', '湖州市', '紹興市', '金華市', '衢州市', '舟山市', '臺州市', '麗水市'];?
cityArr[15] = ['江西省','南昌市','景德鎮(zhèn)市','萍鄉(xiāng)市','九江市','新余市','鷹潭市','贛州市','吉安市','宜春市','撫州市','上饒市'];
cityArr[16] = ['湖北省','武漢市','黃石市','十堰市', '宜昌市', '襄樊市', '鄂州市', '荊門市', '孝感市', '荊州市', '黃岡市', '咸寧市', '隨州市', '恩施土家族苗族自治州','仙桃市', '潛江市', '天門市', '神農(nóng)架林區(qū)'];
cityArr[17] = ['廣西壯族','南寧市','柳州市','桂林市','梧州市','北海市','防城港市','欽州市','貴港市','玉林市','百色市','賀州市','河池市','來賓市','崇左市'];
cityArr[18] = ['甘肅省','蘭州市','嘉峪關市', '金昌市', '白銀市', '天水市', '武威市', '張掖市', '平?jīng)鍪?#39;, '酒泉市', '慶陽市', '定西市', '隴南市', '臨夏回族自治州', '甘南藏族自治州'];
cityArr[19] = ['山西省','太原市','大同市', '陽泉市', '長治市', '晉城市', '朔州市', '晉中市', '運城市', '忻州市', '臨汾市', '呂梁市' ];
cityArr[20] = ['內蒙古自治區(qū)','呼和浩特市', '包頭市', '烏海市', '赤峰市', '通遼市', '鄂爾多斯市', '呼倫貝爾市', '巴彥淖爾市', '烏蘭察布市', '興安盟', '錫林郭勒盟', '阿拉善盟' ];
cityArr[21] = ['陜西省','西安市','銅川市','寶雞市', '咸陽市', '渭南市', '延安市', '漢中市', '榆林市', '安康市', '商洛市' ];
cityArr[22] = ['吉林省','長春市', '吉林市', '四平市', '遼源市', '通化市', '白山市', '松原市', '白城市', '延邊朝鮮族自治州'];
cityArr[23] = ['福建省','福州市', '廈門市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龍巖市', '寧德市' ];
cityArr[24] = ['貴州省','貴陽市','六盤水市', '遵義市', '安順市', '銅仁地區(qū)', '黔西南布依族苗族自治州', '畢節(jié)地區(qū)', '黔東南苗族侗族自治州', '黔南布依族苗族自治州'];
cityArr[25] = ['廣東省','廣州市','韶關市','深圳市','珠海市','汕頭市','佛山市','江門市','湛江市','茂名市','肇慶市','惠州市','梅州市','汕尾市','河源市','陽江市','清遠市','東莞市','中山市','潮州市','揭陽市','云浮市'];
cityArr[26] = ['青海省','西寧市' ,'海東地區(qū)', '海北藏族自治州', '黃南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉樹藏族自治州', '海西蒙古族藏族自治州'];
cityArr[27] = ['西藏','拉薩市','昌都地區(qū)', '山南地區(qū)', '日喀則地市', '那曲地區(qū)', '阿里地區(qū)', '林芝地區(qū)' ];
cityArr[28] = ['四川省','成都市','自貢市', '攀枝花市', '瀘州市', '德陽市', '綿陽市', '廣元市', '遂寧市', '內江市', '樂山市', '南充市', '眉山市', '宜賓市', '廣安市', '達州市', '雅安市', '巴中市', '資陽市', '阿壩藏族羌族自治州', '甘孜藏族自治州', '涼山彝族自治州'];
cityArr[29] = ['寧夏回族','銀川市','石嘴山市','吳忠市','固原市','中衛(wèi)市'];
cityArr[30] = ['海南省','海口市','三亞市','五指山市', '瓊海市', '儋州市', '文昌市', '萬寧市', '東方市', '定安縣', '屯昌縣', '澄邁縣', '臨高縣', '白沙黎族自治縣', '昌江黎族自治縣', '樂東黎族自治縣', '陵水黎族自治縣', '保亭黎族苗族自治縣', '瓊中黎族苗族自治縣' ];
cityArr[31] = ['臺灣省','臺北市', '高雄市', '基隆市', '臺中市', '臺南市', '新竹市', '嘉義市'];
cityArr[32] = ['香港特別行政區(qū)','中西區(qū)', '灣仔區(qū)', '東區(qū)', '南區(qū)', '油尖旺區(qū)', '深水埗區(qū)', '九龍城區(qū)', '黃大仙區(qū)', '觀塘區(qū)', '荃灣區(qū)', '葵青區(qū)', '沙田區(qū)', '西貢區(qū)', '大埔區(qū)', '北區(qū)', '元朗區(qū)', '屯門區(qū)', '離島區(qū)' ];
cityArr[33] = ['澳門特別行政區(qū)','澳門'];
//生成省份
for(var key in provinceArr) {
var provinceOption = document.createElement('option');
provinceOption.value = provinceOption.text = provinceArr[key];
province.options.add(provinceOption);
}
//生成市縣、區(qū)市'
//@current為當前選擇的select節(jié)點，即父類節(jié)點
//@child為子類點
//@childArr為子節(jié)點數(shù)組
function showChild(current, child, childArr) {
var currentValue = current.value;
var count = childArr.length;
//每次切換市'把城市的子option長度設置市',即清除城市的選擇,DOM對象select元素是長度是子option的個市'
child.length = 1;
for(var i = 0; i < count; i++) {
//判斷所選的值即父類，與當前節(jié)點第一個數(shù)組元素是否相市'
if(currentValue == childArr[i][0]) {
//不取第一個數(shù)組元市'因為第一個是父類，所以j市'開始，而不市'
for(var j = 1; j < childArr[i].length; j++) {
var childOption = document.createElement('option');
//ie不支持option對象的value,所以加childOption.text
childOption.value = childOption.text = childArr[i][j];
child.options.add(childOption);?
}
}
}
}
//省份改變市'
province.onchange = function() {
showChild(province, city, cityArr);
}
</script>
</body>
</html>
這個代碼實現(xiàn)想要的功能，但就是感覺有點小小的瑕疵，就是感覺省一級的排序沒有按照我們原來的習慣來，
于是，又重新搜索一番。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="keywords"/>
<meta name="description" />
<title>JS省市二級聯(lián)動菜單</title>
<script language="javascript">
<!--
var where = new Array(35);
function comefrom(loca,locacity) { this.loca = loca; this.locacity = locacity; }
where[0]= new comefrom("請選擇省份名","請選擇城市名");
where[1] = new comefrom("北京","|東城|西城|崇文|宣武|朝陽|豐臺|石景山|海淀|門頭溝|房山|通州|順義|昌平|大興|平谷|懷柔|密云|延慶"); ?
where[2] = new comefrom("上海","|黃浦|盧灣|徐匯|長寧|靜安|普陀|閘北|虹口|楊浦|閔行|寶山|嘉定|浦東|金山|松江|青浦|南匯|奉賢|崇明");
where[3] = new comefrom("天津","|和平|東麗|河東|西青|河西|津南|南開|北辰|河北|武清|紅撟|塘沽|漢沽|大港|寧河|靜海|寶坻|薊縣");
where[4] = new comefrom("重慶","|萬州|涪陵|渝中|大渡口|江北|沙坪壩|九龍坡|南岸|北碚|萬盛|雙撟|渝北|巴南|黔江|長壽|綦江|潼南|銅梁|大足|榮昌|壁山|梁平|城口|豐都|墊江|武隆|忠縣|開縣|云陽|奉節(jié)|巫山|巫溪|石柱|秀山|酉陽|彭水|江津|合川|永川|南川");
where[5] = new comefrom("河北","|石家莊|邯鄲|邢臺|保定|張家口|承德|廊坊|唐山|秦皇島|滄州|衡水");
where[6] = new comefrom("山西","|太原|大同|陽泉|長治|晉城|朔州|呂梁|忻州|晉中|臨汾|運城");
where[7] = new comefrom("內蒙古","|呼和浩特|包頭|烏海|赤峰|呼倫貝爾盟|阿拉善盟|哲里木盟|興安盟|烏蘭察布盟|錫林郭勒盟|巴彥淖爾盟|伊克昭盟");
where[8] = new comefrom("遼寧","|沈陽|大連|鞍山|撫順|本溪|丹東|錦州|營口|阜新|遼陽|盤錦|鐵嶺|朝陽|葫蘆島");
where[9] = new comefrom("吉林","|長春|吉林|四平|遼源|通化|白山|松原|白城|延邊");
where[10] = new comefrom("黑龍江","|哈爾濱|齊齊哈爾|牡丹江|佳木斯|大慶|綏化|鶴崗|雞西|黑河|雙鴨山|伊春|七臺河|大興安嶺");
where[11] = new comefrom("江蘇","|南京|鎮(zhèn)江|蘇州|南通|揚州|鹽城|徐州|連云港|常州|無錫|宿遷|泰州|淮安");
where[12] = new comefrom("浙江","|杭州|寧波|溫州|嘉興|湖州|紹興|金華|衢州|舟山|臺州|麗水");
where[13] = new comefrom("安徽","|合肥|蕪湖|蚌埠|馬鞍山|淮北|銅陵|安慶|黃山|滁州|宿州|池州|淮南|巢湖|阜陽|六安|宣城|亳州");
where[14] = new comefrom("福建","|福州|廈門|莆田|三明|泉州|漳州|南平|龍巖|寧德");
where[15] = new comefrom("江西","|南昌市|景德鎮(zhèn)|九江|鷹潭|萍鄉(xiāng)|新馀|贛州|吉安|宜春|撫州|上饒");
where[16] = new comefrom("山東","|濟南|青島|淄博|棗莊|東營|煙臺|濰坊|濟寧|泰安|威海|日照|萊蕪|臨沂|德州|聊城|濱州|菏澤");
where[17] = new comefrom("河南","|鄭州|開封|洛陽|平頂山|安陽|鶴壁|新鄉(xiāng)|焦作|濮陽|許昌|漯河|三門峽|南陽|商丘|信陽|周口|駐馬店|濟源");
where[18] = new comefrom("湖北","|武漢|宜昌|荊州|襄樊|黃石|荊門|黃岡|十堰|恩施|潛江|天門|仙桃|隨州|咸寧|孝感|鄂州");
where[19] = new comefrom("湖南","|長沙|常德|株洲|湘潭|衡陽|岳陽|邵陽|益陽|婁底|懷化|郴州|永州|湘西|張家界");
where[20] = new comefrom("廣東","|廣州|深圳|珠海|汕頭|東莞|中山|佛山|韶關|江門|湛江|茂名|肇慶|惠州|梅州|汕尾|河源|陽江|清遠|潮州|揭陽|云浮");
where[21] = new comefrom("廣西","|南寧|柳州|桂林|梧州|北海|防城港|欽州|貴港|玉林|南寧地區(qū)|柳州地區(qū)|賀州|百色|河池");
where[22] = new comefrom("海南","|海口|三亞");
where[23] = new comefrom("四川","|成都|綿陽|德陽|自貢|攀枝花|廣元|內江|樂山|南充|宜賓|廣安|達川|雅安|眉山|甘孜|涼山|瀘州");
where[24] = new comefrom("貴州","|貴陽|六盤水|遵義|安順|銅仁|黔西南|畢節(jié)|黔東南|黔南");
where[25] = new comefrom("云南","|昆明|大理|曲靖|玉溪|昭通|楚雄|紅河|文山|思茅|西雙版納|保山|德宏|麗江|怒江|迪慶|臨滄");
where[26] = new comefrom("西藏","|拉薩|日喀則|山南|林芝|昌都|阿里|那曲");
where[27] = new comefrom("陜西","|西安|寶雞|咸陽|銅川|渭南|延安|榆林|漢中|安康|商洛");
where[28] = new comefrom("甘肅","|蘭州|嘉峪關|金昌|白銀|天水|酒泉|張掖|武威|定西|隴南|平?jīng)鰘慶陽|臨夏|甘南");
where[29] = new comefrom("寧夏","|銀川|石嘴山|吳忠|固原");
where[30] = new comefrom("青海","|西寧|海東|海南|海北|黃南|玉樹|果洛|海西");
where[31] = new comefrom("新疆","|烏魯木齊|石河子|克拉瑪依|伊犁|巴音郭勒|昌吉|克孜勒蘇柯爾克孜|博爾塔拉|吐魯番|哈密|喀什|和田|阿克蘇");
where[32] = new comefrom("香港","");
where[33] = new comefrom("澳門","");
where[34] = new comefrom("臺灣","|臺北|高雄|臺中|臺南|屏東|南投|云林|新竹|彰化|苗栗|嘉義|花蓮|桃園|宜蘭|基隆|臺東|金門|馬祖|澎湖");
function select() {
with(document.creator.province) { var loca2 = options[selectedIndex].value; }
for(i = 0;i < where.length;i ++) {
if (where[i].loca == loca2) {
loca3 = (where[i].locacity).split("|");
for(j = 0;j < loca3.length;j++) { with(document.creator.city) { length = loca3.length; options[j].text = loca3[j]; options[j].value = loca3[j]; var loca4=options[selectedIndex].value;}}
break;
}}
document.creator.newlocation.value=loca2+loca4;
}
function init() {
with(document.creator.province) {
length = where.length;
for(k=0;k<where.length;k++) { options[k].text = where[k].loca; options[k].value = where[k].loca; }
options[selectedIndex].text = where[0].loca; options[selectedIndex].value = where[0].loca;
}
with(document.creator.city) {
loca3 = (where[0].locacity).split("|");
length = loca3.length;
for(l=0;l<length;l++) { options[l].text = loca3[l]; options[l].value = loca3[l]; }
options[selectedIndex].text = loca3[0]; options[selectedIndex].value = loca3[0];
}}?
</script>
</head>
<body bgcolor=#FFFFFF alink=#333333 vlink=#333333 link=#333333 topmargin=0 leftmargin=0 onLoad="init()">
<form action="<#ZC_BLOG_HOST#>" method="post" name="creator" enctype="multipart/form-data">
省份 <select name="province" onChange = "select()"></select>
城市 <select name="city" onChange = "select()"></select>
</form>
</font>
</body>
</html>
這下就ok了！
轉載于:https://www.cnblogs.com/cmderq/p/9130889.html
總結
- 上一篇： u盘启动了pe进去不了怎么办 如何解决U
- 下一篇： 1kg大米多少钱？