JS實現的省份級聯實例代碼

2019-11-20 22:37:34

字體：大中小

來源：轉載

供稿：網友

這是從本人以前博客帶過來的，感覺這個還蠻實用，代碼分享下：

province.html:

<html> 
    <head> 
    <title>省份與省市級聯</title> 
    </head> 
<script language="javascript" src="province.js" type="text/javascript" charset="gb2312"></script> 

</script> 
<body onload='getProvince()'> 
<div id='province'><select><option>省份</option></select></div> 
<div id='city'><select><option>城市</option></select></div> 

</boydy> 

</html> 

province.js:

復制代碼代碼如下:

 
var sity;city=new Array(34);city[0]=new Array(19); 
city[0][0]="北京";city[0][1]="東城";city[0][2]="西城";city[0][3]="宣武";city[0][4]="朝陽";city[0][5]="崇文";city[0][6]="海淀";city[0][7]="豐臺";city[0][8]="石景山";city[0][9]="通州";city[0][10]="平谷";city[0][11]="順義";city[0][12]="懷柔";city[0][13]="密云";city[0][14]="延慶";city[0][15]="昌平";city[0][16]="門頭溝";city[0][17]="房山";city[0][18]="大興";city[1]=new Array(12);city[1][0]="上海";city[1][1]="近郊";city[1][2]="閔行";city[1][3]="浦東";city[1][4]="南匯";city[1][5]="奉賢";city[1][6]="金山";city[1][7]="松江";city[1][8]="青浦";city[1][9]="嘉定";city[1][10]="寶山";city[1][11]="崇明";city[2]=new Array(8);city[2][0]="天津";city[2][1]="塘沽";city[2][2]="漢沽";city[2][3]="寧河";city[2][4]="靜海";city[2][5]="武清";city[2][6]="寶坻";city[2][7]="薊縣";city[3]=new Array(1);city[3][0]="重慶";city[4]=new Array(14);city[4][0]="內蒙古";city[4][1]="呼和浩特";city[4][2]="集寧";city[4][3]="包頭";city[4][4]="臨河";city[4][5]="烏海";city[4][6]="東勝";city[4][7]="海拉爾";city[4][8]="赤峰";city[4][9]="錫林浩特";city[4][10]="太仆寺旗";city[4][11]="通遼";city[4][12]="阿拉善盟";city[4][13]="白城";city[5]=new Array(12);city[5][0]="河北";city[5][1]="石家莊";city[5][2]="衡水";city[5][3]="邢臺";city[5][4]="邯鄲";city[5][5]="滄州";city[5][6]="唐山";city[5][7]="廊坊";city[5][8]="秦皇島";city[5][9]="承德";city[5][10]="保定";city[5][11]="張家口";city[6]=new Array(13);city[6][0]="遼寧";city[6][1]="沈陽";city[6][2]="鐵嶺";city[6][3]="撫順";city[6][4]="鞍山";city[6][5]="營口";city[6][6]="大連";city[6][7]="本溪";city[6][8]="丹東";city[6][9]="錦州";city[6][10]="朝陽";city[6][11]="阜新";city[6][12]="盤錦";city[7]=new Array(9);city[7][0]="吉林";city[7][1]="長春";city[7][2]="吉林";city[7][3]="延吉";city[7][4]="通化";city[7][5]="梅河口";city[7][6]="四平";city[7][7]="白城";city[7][8]="松原";city[8]=new Array(9);city[8][0]="黑龍江";city[8][1]="哈爾濱";city[8][2]="綏化";city[8][3]="佳木斯";city[8][4]="牡丹江";city[8][5]="齊齊哈爾";city[8][6]="大慶";city[8][7]="北安";city[8][8]="大興安嶺";city[9]=new Array(12);city[9][0]="江蘇";city[9][1]="南京";city[9][2]="鎮江";city[9][3]="常州";city[9][4]="無錫";city[9][5]="蘇州";city[9][6]="徐州";city[9][7]="連云港";city[9][8]="淮陰";city[9][9]="鹽城";city[9][10]="揚州";city[9][11]="南通";city[10]=new Array(12);city[10][0]="安徽";city[10][1]="合肥";city[10][2]="淮南";city[10][3]="蚌埠";city[10][4]="宿州";city[10][5]="阜陽";city[10][6]="六安";city[10][7]="巢湖";city[10][8]="滁州";city[10][9]="蕪湖";city[10][10]="屯溪";city[10][11]="安慶";city[11]=new Array(14);city[11][0]="山東";city[11][1]="濟南";city[11][2]="聊城";city[11][3]="德州";city[11][4]="淄博";city[11][5]="東營";city[11][6]="濰坊";city[11][7]="煙臺";city[11][8]="青島";city[11][9]="泰安";city[11][10]="濟寧";city[11][11]="荷澤";city[11][12]="臨沂";city[11][13]="棗莊";city[12]=new Array(12);city[12][0]="浙江";city[12][1]="杭州";city[12][2]="紹興";city[12][3]="湖州";city[12][4]="嘉興";city[12][5]="寧波";city[12][6]="舟山";city[12][7]="臺州";city[12][8]="金華";city[12][9]="麗水";city[12][10]="衢州";city[12][11]="溫州";city[13]=new Array(11);city[13][0]="江西";city[13][1]="南昌";city[13][2]="九江";city[13][3]="景德鎮";city[13][4]="上饒";city[13][5]="鷹潭";city[13][6]="宜春";city[13][7]="萍鄉";city[13][8]="贛州";city[13][9]="吉安";city[13][10]="撫州";city[14]=new Array(10);city[14][0]="福建";city[14][1]="福州";city[14][2]="南平";city[14][3]="邵武";city[14][4]="福安";city[14][5]="廈門";city[14][6]="泉州";city[14][7]="漳州";city[14][8]="龍巖";city[14][9]="三明";city[15]=new Array(14);city[15][0]="湖南";city[15][1]="長沙";city[15][2]="株洲";city[15][3]="益陽";city[15][4]="岳陽";city[15][5]="常德";city[15][6]="吉首";city[15][7]="婁底";city[15][8]="懷化";city[15][9]="衡陽";city[15][10]="邵陽";city[15][11]="郴州";city[15][12]="零陵";city[15][13]="張家界";city[16]=new Array(10);city[16][0]="湖北";city[16][1]="武漢";city[16][2]="沙市";city[16][3]="黃石";city[16][4]="鄂州";city[16][5]="咸寧";city[16][6]="襄樊";city[16][7]="十堰";city[16][8]="宜昌";city[16][9]="恩施";city[17]=new Array(15);city[17][0]="河南";city[17][1]="鄭州";city[17][2]="新鄉";city[17][3]="安陽";city[17][4]="許昌";city[17][5]="漯河";city[17][6]="駐馬店";city[17][7]="信陽";city[17][8]="周口";city[17][9]="平頂山";city[17][10]="洛陽";city[17][11]="三門峽";city[17][12]="南陽";city[17][13]="開封";city[17][14]="商丘";city[18]=new Array(12);city[18][0]="廣東";city[18][1]="廣州";city[18][2]="韶關";city[18][3]="英德";city[18][4]="梅州";city[18][5]="汕頭";city[18][6]="惠州";city[18][7]="深圳";city[18][8]="湛江";city[18][9]="茂名";city[18][10]="肇慶";city[18][11]="佛山";city[19]=new Array(9);city[19][0]="廣西";city[19][1]="南寧";city[19][2]="百色";city[19][3]="欽州";city[19][4]="玉林";city[19][5]="桂林";city[19][6]="梧州";city[19][7]="柳州";city[19][8]="河池";city[20]=new Array(8);city[20][0]="貴州";city[20][1]="貴陽";city[20][2]="六盤水";city[20][3]="玉屏";city[20][4]="凱里";city[20][5]="都勻";city[20][6]="安順";city[20][7]="遵義";city[21]=new Array(16);city[21][0]="四川";city[21][1]="成都";city[21][2]="樂山";city[21][3]="涼山";city[21][4]="渡口";city[21][5]="綿陽";city[21][6]="汶川";city[21][7]="雅安";city[21][8]="甘孜";city[21][9]="廣元";city[21][10]="南充";city[21][11]="達州";city[21][12]="內江";city[21][13]="自貢";city[21][14]="宜賓";city[21][15]="瀘州";city[22]=new Array(13);city[22][0]="云南";city[22][1]="昆明";city[22][2]="曲靖";city[22][3]="昭通";city[22][4]="開遠";city[22][5]="文山";city[22][6]="思茅";city[22][7]="大理";city[22][8]="楚雄";city[22][9]="臨滄";city[22][10]="保山";city[22][11]="六盤水";city[22][12]="渡口";city[23]=new Array(11);city[23][0]="陜西";city[23][1]="西安";city[23][2]="渭南";city[23][3]="延安";city[23][4]="綏德";city[23][5]="榆林";city[23][6]="寶雞";city[23][7]="漢中";city[23][8]="安康";city[23][9]="商洛";city[23][10]="銅川";city[24]=new Array(13);city[24][0]="甘肅";city[24][1]="蘭州";city[24][2]="武威";city[24][3]="張掖";city[24][4]="酒泉";city[24][5]="安西";city[24][6]="金昌";city[24][7]="天水";city[24][8]="定西";city[24][9]="平涼";city[24][10]="西峰";city[24][11]="隴西";city[24][12]="甘南";city[25]=new Array(5);city[25][0]="寧夏";city[25][1]="銀川";city[25][2]="吳忠";city[25][3]="石咀山";city[25][4]="固原";city[26]=new Array(7);city[26][0]="青海";city[26][1]="西寧";city[26][2]="果洛";city[26][3]="玉樹";city[26][4]="格爾木";city[26][5]="海西";city[26][6]="阿壩";city[27]=new Array(11);city[27][0]="新疆";city[27][1]="烏魯木齊";city[27][2]="石河子";city[27][3]="烏蘇";city[27][4]="克拉瑪依";city[27][5]="伊寧";city[27][6]="吐魯番";city[27][7]="哈密";city[27][8]="巴音郭楞";city[27][9]="阿克蘇";city[27][10]="喀什";city[28]=new Array(8);city[28][0]="西藏";city[28][1]="拉薩";city[28][2]="那曲";city[28][3]="昌都";city[28][4]="山南";city[28][5]="日喀則";city[28][6]="阿里";city[28][7]="林芝";city[29]=new Array(4);city[29][0]="海南";city[29][1]="?？?;city[29][2]="三亞";city[29][3]="海南";city[30]=new Array(12);city[30][0]="山西";city[30][1]="太原";city[30][2]="離石";city[30][3]="忻州";city[30][4]="寧武";city[30][5]="大同";city[30][6]="臨汾";city[30][7]="侯馬";city[30][8]="運城";city[30][9]="陽泉";city[30][10]="長治";city[30][11]="晉城";city[31]=new Array(17);city[31][0]="臺灣";city[31][1]="臺北";city[31][2]="臺中";city[31][3]="基隆";city[31][4]="臺南";city[31][5]="嘉義";city[31][6]="桃園";city[31][7]="苗粟";city[31][8]="屏東";city[31][9]="南投";city[31][10]="花蓮";city[31][11]="新竹";city[31][12]="彰化";city[31][13]="高雄";city[31][14]="宜蘭";city[31][15]="臺東";city[31][16]="彭湖";city[32]=new Array(1);city[32][0]="香港";city[33]=new Array(1);city[33][0]="澳門"; 
    function getRegion() 
    { 

         
        document.getElementById("city").innerHTML=""; 
        var provinces=document.getElementById("provinces"); 
        var prov=provinces[provinces.selectedIndex].value; 
        var str="<select>"; 

            for(var i=0;i<city[prov].length;i++) 
            {         
                str=str+"<option>"+city[prov][i]+"</option>";     
            } 
            str=str+"</select>"; 
    document.getElementById("city").innerHTML=str; 

    } 
    function getProvince() 
    {    var strs="<select onchange='getRegion()' id='provinces'><option></option>"; 
        for(var i=0;i<=33;i++) 
        { 
            strs=strs+"<option value="+i+">"+city[i][0]+"</option>"; 
        }     
        strs=strs+"</select>"; 
        document.getElementById('province').innerHTML=strs; 
    } 