全网整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：400-708-3566
电脑端+手机端+微信端=数据同步管理
免费咨询热线：400-708-3566
本文实例讲述了jQuery实现的省市联动菜单功能。分享给大家供大家参考，具体如下：
主要通过 select 下的 option 的 change 事件动态的为市级菜单添加数据。
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>请选择省份</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程序设计有所帮助。
# jQuery
# 省市联动
# 菜单
# jQuery-Citys省市区三级菜单联动插件使用详解
# jquery+php后台实现省市区联动功能示例
# 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
# jquery+ajax实现省市区三级联动(封装和不封装两种方式)
# jQuery ajax实现省市县三级联动
# 省市区三级联动jquery实现代码
# jQuery+jsp实现省市县三级联动效果(附源码)
# JQuery省市联动效果实现过程详解
# 藏族
# 请选择
# 布依族
# 傣族
# 香港特别行政区
# 彝族
# 土家族
# 琼中黎族苗族自治县
# 陵水黎族自治县
# 白沙黎族自治县
# 保亭黎族苗族自治县
# 重庆市
# 天津市
# 昌江黎族自治县
# 阿图什市
# 玉树藏族自治州
# 阜康市
# 凉山彝族自治州
# 临沧市
# 临高县
相关文章：
建站之星安全性能如何？防护体系能否抵御黑客入侵？
图册素材网站设计制作软件,图册的导出方式有几种？
如何快速搭建高效服务器建站系统？
建站主机与虚拟主机有何区别？如何选择最优方案？
怀化网站制作公司,怀化新生儿上户网上办理流程？
黑客如何利用漏洞与弱口令入侵网站服务器？
h5网站制作工具有哪些,h5页面制作工具有哪些？
可靠的网站设计制作软件,做网站设计需要什么样的电脑配置？
合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台？
广州网站制作的公司,现在专门做网站的公司有没有哪几家是比较好的，性价比高，模板也多的？
岳西云建站教程与模板下载_一站式快速建站系统操作指南
招贴海报怎么做,什么是海报招贴？
网站网页制作专业公司,怎样制作自己的网页？
小型网站制作HTML,*游戏网站怎么搭建？
Bpmn 2.0的XML文件怎么画流程图
c++怎么实现高并发下的无锁队列_c++ std::atomic原子变量与CAS操作【详解】
制作充值网站的软件,做人力招聘为什么要自己交端口钱？
哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？
大同网页,大同瑞慈医院官网？
济南网站建设制作公司,室内设计网站一般都有哪些功能？
如何快速配置高效服务器建站软件？
高端网站建设与定制开发一站式解决方案 中企动力
西安大型网站制作公司,西安招聘网站最好的是哪个？
武汉网站制作费用多少,在武汉武昌，建面100平方左右的房子，想装暖气片，费用大概是多少啊？
专业网站建设制作报价,网页设计制作要考什么证？
大连网站制作费用,大连新青年网站，五年四班里的视频怎样下载啊？
网站制作公司,橙子建站是合法的吗？
寿县云建站：智能SEO优化与多行业模板快速上线指南
如何解决ASP生成WAP建站中文乱码问题？
北京企业网站设计制作公司,北京铁路集团官方网站？
建站之星安装步骤有哪些常见问题？
详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）
建站之星CMS五站合一模板配置与SEO优化指南
早安海报制作网站推荐大全,企业早安海报怎么每天更换？
如何在橙子建站中快速调整背景颜色？
如何批量查询域名的建站时间记录？
企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？
如何用PHP工具快速搭建高效网站？
教育培训网站制作流程,请问edu教育网站的域名怎么申请？
香港服务器网站生成指南：免费资源整合与高速稳定配置方案
移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？
建站之星后台密码遗忘如何找回？
如何确保FTP站点访问权限与数据传输安全？
专业网站制作服务公司,有哪些网站可以免费发布招聘信息？
如何在阿里云虚拟主机上快速搭建个人网站？
湖州网站制作公司有哪些,浙江中蓝新能源公司官网？
如何在西部数码注册域名并快速搭建网站？
网站制作与设计教程,如何制作一个企业网站，建设网站的基本步骤有哪些？
ppt在线制作免费网站推荐,有什么下载免费的ppt模板网站？
如何高效生成建站之星成品网站源码？
*请认真填写需求信息，我们会在24小时内与您取得联系。
