本文描述的省份和城市二級聯動下拉菜單，在js部分設置省份和城市信息，當然也可以將數據保存在數據庫中，當需要使用的時候在讀取。這裏用的是js原生代碼
這裏是城市省份數據
var province=["北京","上海","廣東","江蘇","浙江","重慶","安徽","福建","甘肅","廣西",
"貴州","海南","河北","黑龍江","河南","湖北","湖南","江西","吉林","遼寧","內蒙古",
"寧夏","青海","山東","山西","陝西","四川","天津","新疆","西藏","雲南","香港",
"澳門","臺灣","海外"];
var city=[["東城","西城","朝陽","豐臺","石景山","海淀","門頭溝","房山","通州","順義","昌平","大興","平谷","懷柔","密雲","延慶"],
["崇明","黃浦","盧灣","徐匯","長寧","靜安","普陀","閘北","虹口","楊浦","閔行","寶山","嘉定","浦東","金山","松江","青浦","南匯","奉賢"],
["廣州","深圳","珠海","東莞","中山","佛山","惠州","河源","潮州","江門","揭陽","茂名","梅州","清遠","汕頭","汕尾","韶關","順德","陽江","雲浮","湛江","肇慶"],
["南京","常熟","常州","海門","淮安","江都","江陰","崑山","連雲港","南通","啓東","沭陽","宿遷","蘇州","太倉","泰州","同裏","無錫","徐州","鹽城","宜興","儀徵","張家港","鎮江","周莊"],
["杭州","安吉","慈溪","定海","奉化","海鹽","黃岩","湖州","嘉興","金華","臨安","臨海","麗水","寧波","甌海","平湖","千島湖","衢州","江山","瑞安","紹興","嵊州","台州","溫嶺","溫州","餘姚","舟山"],
["萬州","涪陵","渝中","大渡口","江北","沙坪壩","九龍坡","南岸","北碚","萬盛","雙橋","渝北","巴南","黔江","長壽","綦江","潼南","銅梁","大足","榮昌","璧山","梁平","城口","豐都","墊江","武隆","忠縣","開縣","雲陽","奉節","巫山","巫溪","石柱","秀山","酉陽","彭水","江津","合川","永川","南川"],
["合肥","安慶","蚌埠","亳州","巢湖","滁州","阜陽","貴池","淮北","淮南","黃山","九華山","六安","馬鞍山","宿州","銅陵","屯溪","蕪湖","宣城"],
["福州","廈門","泉州","漳州","龍巖","南平","寧德","莆田","三明"],
["蘭州","白銀","定西","敦煌","甘南","金昌","酒泉","臨夏","平涼","天水","武都","武威","西峯","張掖"],
["南寧","百色","北海","桂林","防城港","貴港","河池","賀州","柳州","欽州","梧州","玉林"],
["貴陽","安順","畢節","都勻","凱里","六盤水","銅仁","興義","玉屏","遵義"],
["海口","儋縣","陵水","瓊海","三亞","通什","萬寧"],
["石家莊","保定","北戴河","滄州","承德","豐潤","邯鄲","衡水","廊坊","南戴河","秦皇島","唐山","新城","邢臺","張家口"],
["哈爾濱","北安","大慶","大興安嶺","鶴崗","黑河","佳木斯","雞西","牡丹江","齊齊哈爾","七臺河","雙鴨山","綏化","伊春"],
["鄭州","安陽","鶴壁","潢川","焦作","濟源","開封","漯河","洛陽","南陽","平頂山","濮陽","三門峽","商丘","新鄉","信陽","許昌","周口","駐馬店"],
["武漢","恩施","鄂州","黃岡","黃石","荊門","荊州","潛江","十堰","隨州","武穴","仙桃","咸寧","襄陽","襄樊","孝感","宜昌"],
["長沙","常德","郴州","衡陽","懷化","吉首","婁底","邵陽","湘潭","益陽","岳陽","永州","張家界","株洲"],
["南昌","撫州","贛州","吉安","景德鎮","井岡山","九江","廬山","萍鄉","上饒","新餘","宜春","鷹潭"],
["長春","吉林","白城","白山","琿春","遼源","梅河","四平","松原","通化","延吉"],
["瀋陽","鞍山","本溪","朝陽","大連","丹東","撫順","阜新","葫蘆島","錦州","遼陽","盤錦","鐵嶺","營口"],
["呼和浩特","阿拉善盟","包頭","赤峯","東勝","海拉爾","集寧","臨河","通遼","烏海","烏蘭浩特","錫林浩特"],
["銀川","固源","石嘴山","吳忠"],
["西寧","德令哈","格爾木","共和","海東","海晏","瑪沁","同仁","玉樹"],
["濟南","濱州","德州","東營","菏澤","濟寧","萊蕪","聊城","臨沂","蓬萊","青島","曲阜","日照","泰安","濰坊","威海","煙臺","棗莊","淄博"],
["太原","長治","大同","侯馬","晉城","離石","臨汾","寧武","朔州","沂州","陽泉","榆次","運城"],
["西安","安康","寶雞","漢中","渭南","商州","綏德","銅川","咸陽","延安","榆林"],
["成都","巴中","達川","德陽","都江堰","峨眉山","涪陵","廣安","廣元","九寨溝","康定","樂山","瀘州","馬爾康","綿陽","眉山","南充","內江","攀枝花","遂寧","汶川","西昌","雅安","宜賓","自貢","資陽"],
["天津","和平","東麗","河東","西青","河西","津南","南開","北辰","河北","武清","紅橋","塘沽","漢沽","大港","寧河","靜海","寶坻","薊縣"],
["烏魯木齊","阿克蘇","阿勒泰","阿圖什","博樂","昌吉","東山","哈密","和田","喀什","克拉瑪依","庫車","庫爾勒","奎屯","石河子","塔城","吐魯番","伊寧"],
["拉薩","阿里","昌都","林芝","那曲","日喀則","山南"],
["昆明","大理","保山","楚雄","東川","箇舊","景洪","開遠","臨滄","麗江","六庫","潞西","曲靖","思茅","文山","西雙版納","玉溪","中甸","昭通"],
["香港","九龍","新界"],
["澳門"],
["臺北","基隆","臺南","臺中","高雄","屏東","南投","雲林","新竹","彰化","苗栗","嘉義","花蓮","桃園","宜蘭","臺東","金門","馬祖","澎湖"],
["俄羅斯","美國","日本","英國","法國","德國","澳大利亞","東南亞","阿拉伯半島","非洲","南美洲"]];
html代碼
<div class="col-md-6">
<label for="showMethod">生產省份</label>
<select style="margin-bottom:15px;" class="form-control" id="province" >
<option value="none">----請選擇----</option>
</select>
</div>
<div class="col-md-6">
<label for="showMethod">生產城市 </label>
<select class="form-control" id="city">
<option value="none">----請選擇----</option>
</select>
</div>
js代碼
var iNum1;
var iNum2;
$(function () {
//首先遍歷省，直接append到id爲province的select選擇框之中
for(var i=0;i<province.length;i++){
$('#province').append('<option>'+province[i]+'</option>');
};
//如果檢測到省級被改變，則觸發下面的城市操作
$('#province').change(function () {
$('#city').children().not(':eq(0)').remove();//當選擇其他省的時候，把之前市的內容清空掉
iNum1 = $(this).children('option:selected').index();//獲取你所選取的省對應的位置
var aaCity = city[iNum1-1];
for(var j=0;j<aaCity.length;j++){
$('#city').append('<option>'+aaCity[j]+'</option>');
}
//通過iNum；這一行中 city[iNum-1],表示的是，譬如你選A省，city[iNum-1]數組表示的就是A省下面對應的市；iNum-1 這裏減去1的意思是，因爲在下拉框裏面我們第一行有個---請選擇----，要把這個去掉，才能對應上。然後遍歷aaCity，把對應的市插入進去；
});
})
對本文的幫助