基于JQUERY的城市二级联动实现

// JavaScript Document

var city = [
{
province: "安徽",
list:["合肥","安庆","蚌埠","亳州","巢湖","滁州","阜阳","贵池","淮北","淮化","淮南","黄山","九华山","六安","马鞍山","宿州","铜陵","屯溪","芜湖","宣城"]
},{
province: “北京”,
list:["东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆"]
},{
province: “重庆”,
list:["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","壁山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川","南川"]
},{
province: “福建”,
list:["福州","福安","龙岩","南平","宁德","莆田","泉州","三明","邵武","石狮","晋江","永安","武夷山","厦门","漳州"]
},{
province: “甘肃”,
list:["兰州","白银","定西","敦煌","甘南","金昌","酒泉","临夏","平凉","天水","武都","武威","西峰","嘉峪关","张掖"]
},{
province: “广东”,
list:["广州","潮阳","潮州","澄海","东莞","佛山","河源","惠州","江门","揭阳","开平","茂名","梅州","清远","汕头","汕尾","韶关","深圳","顺德","阳江","英德","云浮","增城","湛江","肇庆","中山","珠海"]
},{
province: “广西”,
list:["南宁","百色","北海","桂林","防城港","河池","贺州","柳州","来宾","钦州","梧州","贵港","玉林"]
},{
province: “贵州”,
list:["贵阳","安顺","毕节","都匀","凯里","六盘水","铜仁","兴义","玉屏","遵义"]
},{
province: “海南”,
list:["海口","三亚","五指山","琼海","儋州","文昌","万宁","东方","定安","屯昌","澄迈","临高","白沙黎族","昌江黎族","乐东黎族","陵水黎族","保亭黎族","琼中黎族","西沙群岛","南沙群岛","中沙群岛"]
},{
province: “河北”,
list:["石家庄","保定","北戴河","沧州","承德","丰润","邯郸","衡水","廊坊","南戴河","秦皇岛","唐山","新城","邢台","张家口"]
},{
province: “黑龙江”,
list:["哈尔滨","北安","大庆","大兴安岭","鹤岗","黑河","佳木斯","鸡西","牡丹江","齐齐哈尔","七台河","双鸭山","绥化","伊春"]
},{
province: “河南”,
list:["郑州","安阳","鹤壁","潢川","焦作","济源","开封","漯河","洛阳","南阳","平顶山","濮阳","三门峡","商丘","新乡","信阳","许昌","周口","驻马店"]
},{
province: “香港”,
list:["香港","九龙","新界"]
},{
province: “湖北”,
list:["武汉","恩施","鄂州","黄冈","黄石","荆门","荆州","潜江","十堰","随州","武穴","仙桃","咸宁","襄阳","襄樊","孝感","宜昌"]
},{
province: “湖南”,
list:["长沙","常德","郴州","衡阳","怀化","吉首","娄底","邵阳","湘潭","益阳","岳阳","永州","张家界","株洲"]
},{
province: “江苏”,
list:["南京","常熟","常州","海门","淮安","江都","江阴","昆山","连云港","南通","启东","沭阳","宿迁","苏州","太仓","泰州","同里","无锡","徐州","盐城","扬州","宜兴","仪征","张家港","镇江","周庄"]
},{
province: “江西”,
list:["南昌","抚州","赣州","吉安","景德镇","井冈山","九江","庐山","萍乡","上饶","新余","宜春","鹰潭"]
},{
province: “吉林”,
list:["长春","白城","白山","珲春","辽源","梅河","吉林","四平","松原","通化","延吉"]
},{
province: “辽宁”,
list:["沈阳","鞍山","本溪","朝阳","大连","丹东","抚顺","阜新","葫芦岛","锦州","辽阳","盘锦","铁岭","营口"]
},{
province: “澳门” ,
list:["澳门"]
},{
province: “内蒙古”,
list:["呼和浩特","阿拉善盟","包头","赤峰","东胜","海拉尔","集宁","临河","通辽","乌海","乌兰浩特","锡林浩特"]
},{
province: “宁夏”,
list:["银川","固原","中卫","石嘴山","吴忠"]
},{
province: “青海”,
list:["西宁","德令哈","格尔木","共和","海东","海晏","玛沁","同仁","玉树"]
},{
province: “山东”,
list:["济南","滨州","兖州","德州","东营","菏泽","济宁","莱芜","聊城","临沂","蓬莱","青岛","曲阜","日照","泰安","潍坊","威海","烟台","枣庄","淄博"]
},{
province: “上海”,
list:["崇明","黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","朱家角"]
},{
province: “山西”,
list:["太原","长治","大同","候马","晋城","离石","临汾","宁武","朔州","忻州","阳泉","榆次","运城"]
},{
province: “陕西”,
list:["西安","安康","宝鸡","汉中","渭南","商州","绥德","铜川","咸阳","延安","榆林"]
},{
province: “四川”,
list:["成都","巴中","达州","德阳","都江堰","峨眉山","涪陵","广安","广元","九寨沟","康定","乐山","泸州","马尔康","绵阳","眉山","南充","内江","攀枝花","遂宁","汶川","西昌","雅安","宜宾","自贡","资阳"]
},{
province: “台湾”,
list:["台北","基隆","台南","台中","高雄","屏东","南投","云林","新竹","彰化","苗栗","嘉义","花莲","桃园","宜兰","台东","金门","马祖","澎湖","其它"]
},{
province: “天津”,
list:["天津","和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县"]
},{
province: “新疆”,
list:["乌鲁木齐","阿克苏","阿勒泰","阿图什","博乐","昌吉","东山","哈密","和田","喀什","克拉玛依","库车","库尔勒","奎屯","石河子","塔城","吐鲁番","伊宁"]
},{
province: “西藏”,
list:["拉萨","阿里","昌都","林芝","那曲","日喀则","山南"]
},{
province: “云南”,
list:["昆明","大理","保山","楚雄","东川","个旧","景洪","开远","临沧","丽江","六库","潞西","曲靖","思茅","文山","西双版纳","玉溪","中甸","昭通"]
},{
province: “浙江”,
list:["杭州","安吉","慈溪","定海","奉化","海盐","黄岩","湖州","嘉兴","金华","临安","临海","丽水","宁波","瓯海","平湖","千岛湖","衢州","江山","瑞安","绍兴","嵊州","台州","温岭","温州","余姚","舟山"]
},{
province: “海外”,
list:["美国","英国","法国","瑞士","澳洲","新西兰","加拿大","奥地利","韩国","日本","德国","意大利","西班牙","俄罗斯","泰国","印度","荷兰","新加坡","欧洲","北美","南美","亚洲","非洲","大洋洲"]
}
];

//二级下拉框
$.each(city, function(i, v){
var option = “
“+v.province+”

“;
$(‘#province’).append(option);
});

 

$(‘#province’).live(‘change’, function(){
var index = $(this).val();
$(‘#city’).find(“option”).not(‘.keep’).remove();
$(‘#city’).find(‘.keep’).attr(‘selected’, ‘selected’);
if(index){
$.each(city[index].list, function(i, v){
var option = “
“+v+”

“;
$(‘#city’).append(option);
});
}
});

 

页面先引入jquery文件,然后引入上边的页面。并在指定的位置添加如下代码即可。

<select id=”province”><option value=”">省份</option></select>                        <select id=”city”><option value=”">城市</option></select


1 条评论

  1. 匿名说道:

    😛 很有用

发表评论

(以便回访)