溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
本文實(shí)例講述了jQuery實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單功能。分享給大家供大家參考，具體如下：
主要通過(guò) select 下的 option 的 change 事件動(dòng)態(tài)的為市級(jí)菜單添加數(shù)據(jù)。
index.html：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript" language="javascript" src="js/linkageProvinceCity.js"></script> </head> <body> 所在省市 <select id="selectProv" onchange="prov_onChange()"> <option>請(qǐng)選擇省份</option> </select> <select id="selectCity" onchange="city_onChange()"> <option>請(qǐng)選擇市區(qū)</option> </select> </body> </html>
linkageProvinceCity.js：
/**
* Created with JetBrains PhpStorm.
* User: smeoi
* Date: 13-11-11
* Time: 上午11:32
* To change this template use File | Settings | File Templates.
*/
$(function () {
//初始化省份菜單
var prov = new Array();
prov[1] = "北京市";
prov[2] = "天津市";
prov[3] = "上海市";
prov[4] = "重慶市";
prov[5] = "河北省";
prov[6] = "山西省";
prov[7] = "臺(tái)灣省";
prov[8] = "遼寧省";
prov[9] = "吉林省";
prov[10] = "黑龍江省";
prov[11] = "江蘇省";
prov[12] = "浙江省";
prov[13] = "安徽省";
prov[14] = "福建省";
prov[15] = "江西省";
prov[16] = "山東省";
prov[17] = "河南省";
prov[18] = "湖北省";
prov[19] = "湖南省";
prov[20] = "廣東省";
prov[21] = "甘肅省";
prov[22] = "四川省";
prov[23] = "貴州省";
prov[24] = "海南省";
prov[25] = "云南省";
prov[26] = "青海省";
prov[27] = "陜西省";
prov[28] = "廣西壯族自治區(qū)";
prov[29] = "西藏自治區(qū)";
prov[30] = "寧夏回族自治區(qū)";
prov[31] = "新疆維吾爾自治區(qū)";
prov[32] = "內(nèi)蒙古自治區(qū)";
prov[33] = "澳門(mén)特別行政區(qū)";
prov[34] = "香港特別行政區(qū)";
for (var i = 1; i < prov.length; i++) {
$("#selectProv").append("<option>"+prov[i]+"</option>");
}
var city = new Array();
city[1] = new Array("北京市");
city[2] = new Array("天津市");
city[3] = new Array("上海市");
city[4] = new Array("重慶市");
city[5] = new Array("保定市", "滄州市", "承德市", "邯鄲市", "衡水市", "廊坊市", "秦皇島市", "石家莊市", "唐山市", "邢臺(tái)市", "張家口市");
city[6] = new Array("長(zhǎng)治市", "大同市", "晉城市", "晉中市", "臨汾市", "呂梁市", "朔州市", "太原市", "忻州市", "陽(yáng)泉市", "運(yùn)城市");
city[7] = new Array("高雄市", "高雄縣", "花蓮縣", "基隆市", "嘉義市", "嘉義縣", "苗栗縣", "南投縣", "澎湖縣", "屏東縣", "臺(tái)北市", "臺(tái)北縣", "臺(tái)東縣", "臺(tái)南市", "臺(tái)南縣", "臺(tái)中市", "臺(tái)中縣", "桃園縣", "新竹市", "新竹縣", "宜蘭縣", "云林縣", "彰化縣");
city[8] = new Array("鞍山市", "本溪市", "朝陽(yáng)市", "大連市", "丹東市", "撫順市", "阜新市", "葫蘆島市", "錦州市", "遼陽(yáng)市", "盤(pán)錦市", "沈陽(yáng)市", "鐵嶺市", "營(yíng)口市");
city[9] = new Array("白城市", "白山市", "長(zhǎng)春市", "吉林市", "遼源市", "四平市", "松原市", "通化市", "延邊朝鮮族自治州");
city[10] = new Array("大慶市", "大興安嶺地區(qū)", "哈爾濱市", "鶴崗市", "黑河市", "雞西市", "佳木斯市", "牡丹江市", "七臺(tái)河市", "齊齊哈爾市", "雙鴨山市", "綏化市", "伊春市");
city[11] = new Array("常州市", "淮安市", "連云港市", "南京市", "南通市", "蘇州市", "宿遷市", "泰州市", "無(wú)錫市", "徐州市", "鹽城市", "揚(yáng)州市", "鎮(zhèn)江市");
city[12] = new Array("杭州市", "湖州市", "嘉興市", "金華市", "麗水市", "寧波市", "衢州市", "紹興市", "臺(tái)州市", "溫州市", "舟山市");
city[13] = new Array("安慶市", "蚌埠市", "亳州市", "巢湖市", "池州市", "滁州市", "阜陽(yáng)市", "合肥市", "淮北市", "淮南市", "黃山市", "六安市", "馬鞍山市", "宿州市", "銅陵市", "蕪湖市", "宣城市");
city[14] = new Array("福州市", "龍巖市", "南平市", "寧德市", "莆田市", "泉州市", "三明市", "廈門(mén)市", "漳州市");
city[15] = new Array("撫州市", "贛州市", "吉安市", "景德鎮(zhèn)市", "九江市", "南昌市", "萍鄉(xiāng)市", "上饒市", "新余市", "宜春市", "鷹潭市");
city[16] = new Array("濱州市", "德州市", "東營(yíng)市", "菏澤市", "濟(jì)南市", "濟(jì)寧市", "萊蕪市", "聊城市", "臨沂市", "青島市", "日照市", "泰安市", "威海市", "濰坊市", "煙臺(tái)市", "棗莊市", "淄博市");
city[17] = new Array("安陽(yáng)市", "鶴壁市", "濟(jì)源市", "焦作市", "開(kāi)封市", "洛陽(yáng)市", "漯河市", "南陽(yáng)市", "平頂山市", "濮陽(yáng)市", "三門(mén)峽市", "商丘市", "新鄉(xiāng)市", "信陽(yáng)市", "許昌市", "鄭州市", "周口市", "駐馬店市");
city[18] = new Array("鄂州市", "恩施土家族苗族自治州", "黃岡市", "黃石市", "荊門(mén)市", "荊州市", "潛江市", "神農(nóng)架林區(qū)", "十堰市", "隨州市", "天門(mén)市", "武漢市", "仙桃市", "咸寧市", "襄樊市", "孝感市", "宜昌市");
city[19] = new Array("長(zhǎng)沙市", "常德市", "郴州市", "衡陽(yáng)市", "懷化市", "婁底市", "邵陽(yáng)市", "湘潭市", "湘西土家族苗族自治州", "益陽(yáng)市", "永州市", "岳陽(yáng)市", "張家界市", "株洲市");
city[20] = new Array("潮州市", "東莞市", "佛山市", "廣州市", "河源市", "惠州市", "江門(mén)市", "揭陽(yáng)市", "茂名市", "梅州市", "清遠(yuǎn)市", "汕頭市", "汕尾市", "韶關(guān)市", "深圳市", "陽(yáng)江市", "云浮市", "湛江市", "肇慶市", "中山市", "珠海市");
city[21] = new Array("白銀市", "定西市", "甘南藏族自治州", "嘉峪關(guān)市", "金昌市", "酒泉市", "蘭州市", "臨夏回族自治州", "隴南市", "平?jīng)鍪?, "慶陽(yáng)市", "天水市", "武威市", "張掖市");
city[22] = new Array("阿壩藏族羌族自治州", "巴中市", "成都市", "達(dá)州市", "德陽(yáng)市", "甘孜藏族自治州", "廣安市", "廣元市", "樂(lè)山市", "涼山彝族自治州", "瀘州市", "眉山市", "綿陽(yáng)市", "內(nèi)江市", "南充市", "攀枝花市", "遂寧市", "雅安市", "宜賓市", "資陽(yáng)市", "自貢市");
city[23] = new Array("安順市", "畢節(jié)地區(qū)", "貴陽(yáng)市", "六盤(pán)水市", "黔東南苗族侗族自治州", "黔南布依族苗族自治州", "黔西南布依族苗族自治州", "銅仁地區(qū)", "遵義市");
city[24] = new Array("白沙黎族自治縣", "保亭黎族苗族自治縣", "昌江黎族自治縣", "澄邁縣", "儋州市", "定安縣", "東方市", "海口市", "樂(lè)東黎族自治縣", "臨高縣", "陵水黎族自治縣", "瓊海市", "瓊中黎族苗族自治縣", "三亞市", "屯昌縣", "萬(wàn)寧市", "文昌市", "五指山市");
city[25] = new Array("保山市", "楚雄彝族自治州", "大理白族自治州", "德宏傣族景頗族自治州", "迪慶藏族自治州", "紅河哈尼族彝族自治州", "昆明市", "麗江市", "臨滄市", "怒江傈傈族自治州", "曲靖市", "思茅市", "文山壯族苗族自治州", "西雙版納傣族自治州", "玉溪市", "昭通市");
city[26] = new Array("果洛藏族自治州", "海北藏族自治州", "海東地區(qū)", "海南藏族自治州", "海西蒙古族藏族自治州", "黃南藏族自治州", "西寧市", "玉樹(shù)藏族自治州");
city[27] = new Array("安康市", "寶雞市", "漢中市", "商洛市", "銅川市", "渭南市", "西安市", "咸陽(yáng)市", "延安市", "榆林市");
city[28] = new Array("百色市", "北海市", "崇左市", "防城港市", "貴港市", "桂林市", "河池市", "賀州市", "來(lái)賓市", "柳州市", "南寧市", "欽州市", "梧州市", "玉林市");
city[29] = new Array("阿里地區(qū)", "昌都地區(qū)", "拉薩市", "林芝地區(qū)", "那曲地區(qū)", "日喀則地區(qū)", "山南地區(qū)");
city[30] = new Array("固原市", "石嘴山市", "吳忠市", "銀川市", "中衛(wèi)市");
city[31] = new Array("阿克蘇市", "阿拉爾市", "阿勒泰市", "阿圖什市", "博樂(lè)市", "昌吉市", "阜康市", "哈密市", "和田市", "喀什市", "克拉瑪依市", "庫(kù)爾勒市", "奎屯市", "米泉市", "石河子市", "塔城市", "圖木舒克市", "吐魯番市", "烏魯木齊市", "烏蘇市", "五家渠市", "伊寧市");
city[32] = new Array("阿拉善盟", "巴彥淖爾市", "包頭市", "赤峰市", "鄂爾多斯市", "呼和浩特市", "呼倫貝爾市", "通遼市", "烏海市", "烏蘭察布市", "錫林郭勒盟", "興安盟");
city[33] = new Array("澳門(mén)特別行政區(qū)");
city[34] = new Array("香港特別行政區(qū)");
$("#selectProv").on("change",function(){
$("#selectCity").children("option").detach();
$("#selectCity").append("<option>請(qǐng)選擇市區(qū)</option>");
var indexProv = $("#selectProv>option:selected").index();//取得選中的想的數(shù)組下標(biāo)0
if (indexProv > 0) {
for (var i = 0; i < city[indexProv].length; i++) {
$("#selectCity").append("<option>" + city[indexProv][i] + "</option>");
}
console.log( $("#selectProv>option:selected").val() + $("#selectCity>option:first").val() );
}else {
console.log( "請(qǐng)選擇省份" );
}
});
$("#selectCity").on("change",function(){
console.log( $("#selectProv>option:selected").val() + $("#selectCity>option:selected").val() );
});
});
運(yùn)行效果圖如下：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery表單(form)操作技巧總結(jié)》、《jquery數(shù)組用法總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼