session 加入redis的實現代碼
699
2024-01-30
本文實例講述了jQuery實現的省市聯動菜單功能。分享給大家供大家參考，具體如下：
主要通過 select 下的 option 的 change 事件動態的為市級菜單添加數據。
index.html：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript" language="javascript" src="http://www.gimoo.net/t/1807/js/jquery-1.10.2.js"></script> <script type="text/javascript" language="javascript" src="http://www.gimoo.net/t/1807/js/linkageProvinceCity.js"></script> </head> <body> 所在省市 <select id="selectProv" onchange="prov_onChange()"> <option>請選擇省份</option> </select> <select id="selectCity" onchange="city_onChange()"> <option>請選擇市區</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] = "臺灣省";
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] = "廣西壯族自治區";
prov[29] = "西藏自治區";
prov[30] = "寧夏回族自治區";
prov[31] = "新疆維吾爾自治區";
prov[32] = "內蒙古自治區";
prov[33] = "澳門特別行政區";
prov[34] = "香港特別行政區";
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("保定市", "滄州市", "承德市", "邯鄲市", "衡水市", "廊坊市", "秦皇島市", "石家莊市", "唐山市", "邢臺市", "張家口市");
city[6] = new Array("長治市", "大同市", "晉城市", "晉中市", "臨汾市", "呂梁市", "朔州市", "太原市", "忻州市", "陽泉市", "運城市");
city[7] = new Array("高雄市", "高雄縣", "花蓮縣", "基隆市", "嘉義市", "嘉義縣", "苗栗縣", "南投縣", "澎湖縣", "屏東縣", "臺北市", "臺北縣", "臺東縣", "臺南市", "臺南縣", "臺中市", "臺中縣", "桃園縣", "新竹市", "新竹縣", "宜蘭縣", "云林縣", "彰化縣");
city[8] = new Array("鞍山市", "本溪市", "朝陽市", "大連市", "丹東市", "撫順市", "阜新市", "葫蘆島市", "錦州市", "遼陽市", "盤錦市", "沈陽市", "鐵嶺市", "營口市");
city[9] = new Array("白城市", "白山市", "長春市", "吉林市", "遼源市", "四平市", "松原市", "通化市", "延邊朝鮮族自治州");
city[10] = new Array("大慶市", "大興安嶺地區", "哈爾濱市", "鶴崗市", "黑河市", "雞西市", "佳木斯市", "牡丹江市", "七臺河市", "齊齊哈爾市", "雙鴨山市", "綏化市", "伊春市");
city[11] = new Array("常州市", "淮安市", "連云港市", "南京市", "南通市", "蘇州市", "宿遷市", "泰州市", "無錫市", "徐州市", "鹽城市", "揚州市", "鎮江市");
city[12] = new Array("杭州市", "湖州市", "嘉興市", "金華市", "麗水市", "寧波市", "衢州市", "紹興市", "臺州市", "溫州市", "舟山市");
city[13] = new Array("安慶市", "蚌埠市", "亳州市", "巢湖市", "池州市", "滁州市", "阜陽市", "合肥市", "淮北市", "淮南市", "黃山市", "六安市", "馬鞍山市", "宿州市", "銅陵市", "蕪湖市", "宣城市");
city[14] = new Array("福州市", "龍巖市", "南平市", "寧德市", "莆田市", "泉州市", "三明市", "廈門市", "漳州市");
city[15] = new Array("撫州市", "贛州市", "吉安市", "景德鎮市", "九江市", "南昌市", "萍鄉市", "上饒市", "新余市", "宜春市", "鷹潭市");
city[16] = new Array("濱州市", "德州市", "東營市", "菏澤市", "濟南市", "濟寧市", "萊蕪市", "聊城市", "臨沂市", "青島市", "日照市", "泰安市", "威海市", "濰坊市", "煙臺市", "棗莊市", "淄博市");
city[17] = new Array("安陽市", "鶴壁市", "濟源市", "焦作市", "開封市", "洛陽市", "漯河市", "南陽市", "平頂山市", "濮陽市", "三門峽市", "商丘市", "新鄉市", "信陽市", "許昌市", "鄭州市", "周口市", "駐馬店市");
city[18] = new Array("鄂州市", "恩施土家族苗族自治州", "黃岡市", "黃石市", "荊門市", "荊州市", "潛江市", "神農架林區", "十堰市", "隨州市", "天門市", "武漢市", "仙桃市", "咸寧市", "襄樊市", "孝感市", "宜昌市");
city[19] = new Array("長沙市", "常德市", "郴州市", "衡陽市", "懷化市", "婁底市", "邵陽市", "湘潭市", "湘西土家族苗族自治州", "益陽市", "永州市", "岳陽市", "張家界市", "株洲市");
city[20] = new Array("潮州市", "東莞市", "佛山市", "廣州市", "河源市", "惠州市", "江門市", "揭陽市", "茂名市", "梅州市", "清遠市", "汕頭市", "汕尾市", "韶關市", "深圳市", "陽江市", "云浮市", "湛江市", "肇慶市", "中山市", "珠海市");
city[21] = new Array("白銀市", "定西市", "甘南藏族自治州", "嘉峪關市", "金昌市", "酒泉市", "蘭州市", "臨夏回族自治州", "隴南市", "平涼市", "慶陽市", "天水市", "武威市", "張掖市");
city[22] = new Array("阿壩藏族羌族自治州", "巴中市", "成都市", "達州市", "德陽市", "甘孜藏族自治州", "廣安市", "廣元市", "樂山市", "涼山彝族自治州", "瀘州市", "眉山市", "綿陽市", "內江市", "南充市", "攀枝花市", "遂寧市", "雅安市", "宜賓市", "資陽市", "自貢市");
city[23] = new Array("安順市", "畢節地區", "貴陽市", "六盤水市", "黔東南苗族侗族自治州", "黔南布依族苗族自治州", "黔西南布依族苗族自治州", "銅仁地區", "遵義市");
city[24] = new Array("白沙黎族自治縣", "保亭黎族苗族自治縣", "昌江黎族自治縣", "澄邁縣", "儋州市", "定安縣", "東方市", "?？谑?, "樂東黎族自治縣", "臨高縣", "陵水黎族自治縣", "瓊海市", "瓊中黎族苗族自治縣", "三亞市", "屯昌縣", "萬寧市", "文昌市", "五指山市");
city[25] = new Array("保山市", "楚雄彝族自治州", "大理白族自治州", "德宏傣族景頗族自治州", "迪慶藏族自治州", "紅河哈尼族彝族自治州", "昆明市", "麗江市", "臨滄市", "怒江傈傈族自治州", "曲靖市", "思茅市", "文山壯族苗族自治州", "西雙版納傣族自治州", "玉溪市", "昭通市");
city[26] = new Array("果洛藏族自治州", "海北藏族自治州", "海東地區", "海南藏族自治州", "海西蒙古族藏族自治州", "黃南藏族自治州", "西寧市", "玉樹藏族自治州");
city[27] = new Array("安康市", "寶雞市", "漢中市", "商洛市", "銅川市", "渭南市", "西安市", "咸陽市", "延安市", "榆林市");
city[28] = new Array("百色市", "北海市", "崇左市", "防城港市", "貴港市", "桂林市", "河池市", "賀州市", "來賓市", "柳州市", "南寧市", "欽州市", "梧州市", "玉林市");
city[29] = new Array("阿里地區", "昌都地區", "拉薩市", "林芝地區", "那曲地區", "日喀則地區", "山南地區");
city[30] = new Array("固原市", "石嘴山市", "吳忠市", "銀川市", "中衛市");
city[31] = new Array("阿克蘇市", "阿拉爾市", "阿勒泰市", "阿圖什市", "博樂市", "昌吉市", "阜康市", "哈密市", "和田市", "喀什市", "克拉瑪依市", "庫爾勒市", "奎屯市", "米泉市", "石河子市", "塔城市", "圖木舒克市", "吐魯番市", "烏魯木齊市", "烏蘇市", "五家渠市", "伊寧市");
city[32] = new Array("阿拉善盟", "巴彥淖爾市", "包頭市", "赤峰市", "鄂爾多斯市", "呼和浩特市", "呼倫貝爾市", "通遼市", "烏海市", "烏蘭察布市", "錫林郭勒盟", "興安盟");
city[33] = new Array("澳門特別行政區");
city[34] = new Array("香港特別行政區");
$("#selectProv").on("change",function(){
$("#selectCity").children("option").detach();
$("#selectCity").append("<option>請選擇市區</option>");
var indexProv = $("#selectProv>option:selected").index();//取得選中的想的數組下標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( "請選擇省份" );
}
});
$("#selectCity").on("change",function(){
console.log( $("#selectProv>option:selected").val() + $("#selectCity>option:selected").val() );
});
});
運行效果圖如下：
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery表單(form)操作技巧總結》、《jquery數組用法總結》、《jQuery遍歷算法與技巧總結》、《jQuery切換特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
