首页 > 代码库 > 级联菜单
级联菜单
利用二维数组和jQuery实现级联菜单,代码如下:
1.html代码
<div class="form_class"> <label>地址</label> <select name="province" id="province></select> <select name="city" id="city"></select> </div>
2.javascript代码
//第二级菜单数组 var city0=["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区", "昌平区","大兴区","怀柔区","平谷区","密云县","延庆县","其他"], city1=["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区"," 青浦区","南汇区","奉贤区","崇明县","其他"], city2=["广州市","清远市","韶关市","河源市","梅州市","潮州市","汕头市","揭阳市","汕尾市","惠州市","东莞市","深圳市","珠海市","中山市","江门市","佛山市","肇庆市","云浮市","阳江市","茂名市","湛江市","其他"], city3=["武汉市","十堰市","襄樊市","荆门市","孝感市","黄冈市","鄂州市","黄石市","咸宁市","荆州市","宜昌市","随州市","恩施土家族苗族自治州","仙桃市","天门市","潜江市","神农架林区","其他"]; //第一级菜单数组 var pro=["北京市","上海市","广东省","湖北省"]; //二维数组 var city=[city0,city1,city2,city3]; //第二级菜单 function cityList(num){ $("#city").html(""); for(var i=0,len=city[num].length;i<len;i++){ var citys=$("#city").html(); $("#city").html(citys+"<option>"+city[num][i]+"</option>"); }; }; cityList(0); //第一级菜单 function proList(){ for(var i=0,len=pro.length;i<len;i++){ var pros=$("#province").html(); $("#province").html(pros+"<option>"+pro[i]+"</option>"); }; }; proList(); //第一级菜单change事件 $("#province").change(function(){ var val=$(this).val(); var num=pro.indexOf(val); cityList(num); });
3.效果图如下:
级联菜单
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。