jquery 三级联动菜单

<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script type="text/javascript" src="jquery-latest.js></script>
<script>
(function($){
$.fn.selInit = function(){return $(this).html("<option>请选择</option>");};
$.area = function(){
        $("#province").selInit();
        $("#city").selInit();
        $("#county").selInit();
        var area = {
                北京:{北京:"东城,西城,海淀,宣武,丰台"},
                江苏:{南京:"江宁,六合,下关,浦口",无锡:"北塘,滨湖,江阴,宜兴"},
    广东:{广州:"越秀区,东山区,海珠区,荔湾区,天河区,白云区,黄埔区,芳村区,番禺区,花都区,增城市,从化市",揭阳:"榕城区,揭东县,揭西县,普宁市"}
                //
        };
        $.each(area,function(p){$("#province").append("<option>"+p+"</option>");});
        $("#province").change(function(){
                $("#city").selInit();
                $("#county").selInit();
                $.each(area,function(p,x){
                        if($("#province option:selected").text() == p)
                        {
                                $.each(x,function(c,cx){
                                        $("#city").append("<option>"+c+"</option>");
                                });
                               
                                $("#city").bind("change",function(){
                                        $("#county").selInit();
                                        $.each(x,function(c,cx){
                                                if($("#city option:selected").text() == c)
                                                        {
                                                                $.each(cx.split(","),function(){
                                                                        $("#county").append("<option>"+this+"</option>");
                                                                });
                                                        }
                                        });
                                });
                        }
                });
        });
};
})(jQuery);
$(function(){
        $("select").css("width","100px");
        $.area();
        });
</script>
</head>
<body>
    <select id="province"><option>请选择</option></select>
       <select id="city"><option>请选择</option></select>
       <select id="county"><option>请选择</option></select>
</body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值