现在位置首页 / 前端开发 /正文

Jquery三级省市区县联动选择下拉菜单--自带全国完整xml数据

作者: IT小兵 | 2013年12月24日| 热度:℃ | 评论: |参与:

在管理项目中,使用Jquery三级省市区县联动选择下拉菜单 是很正常的功能。

这里分享一个开源代码

支持三级联动,并自带xml数据。需要加入项目用IIS运行,原因是采用了get方法获取xml数据。

图示:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>3级联动</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <style>
        .ddldisplay{ float:left;height:27px;position:relative; cursor:pointer; top:0px; left:0px; font-size:12px; margin-right:10px;}
        .ddldisplay span{ padding-left:5px;height:27px; line-height:27px; top:200px; left:0px;}
        .ddldisplay div{ display:none; position:absolute; top:27px; left:0px;border:1px solid #bfbfbf; border-top:none; width:280px; height:auto; overflow:hidden; background:#ffffff;}
        .ddldisplay div a{ display:block; padding-left:5px;height:20px; line-height:20px; color:#666; text-decoration:none; background:#ffffff; float:left; width:60px;}
        .ddldisplay div a:hover{ color:Blue; text-decoration:underline;}
        .ddlShouhuo{width:101px;background:url(../images/ddlAdderss.gif) no-repeat;}
        #ddlQu div{width:140px; border-top:1px solid #d2d2d2;}
        #ddlShi div{width:140px;}
        ul,li,table,h1,h2,h3,h4,h5,h6,img{ list-style:none; margin:0px; padding:0px;}
        body{ margin:0; padding:0; color:#5a5a5a;}
    </style> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="ddlShouhuo ddldisplay" id="ddlSheng">
        <span id="txtSheng" runat="server"></span>
        <div>
	        
        </div>
    </div>
    <div class="ddlShouhuo ddldisplay" id="ddlShi">
        <span id="txtShi" runat="server"></span>
        <div>
	        
        </div>
    </div>
    <div class="ddlShouhuo ddldisplay" id="ddlQu">
        <span id="txtqu" runat="server"></span>
        <div>
	        
        </div>
    </div>
    </div>
    </form>
</body>
</html>
<script>
    $(document).ready(function(){    
        cityArea();
        $('.ddldisplay').hover(
		    function(){return false;},
		    function(){$(this).children("div").hide();$('.ddldisplay').toggle(
			function() { $(this).children("div").show(); },
			function() { $(this).children("div").hide(); }
		);}
		);
    });
    function cityArea() {
        $.ajax({
            url: "Area.xml", //地址
            type: "GET",
            dataType: "xml",
            error: function(xdata) { alert("fail:"); },
            success: function(xdata) {
                if ($(xdata) != null) {
                    $("#ddlSheng div").html("");
                    for (var i = 0; i < $(xdata).find("address > province").length; i++) {
                        $("#ddlSheng div").append("<a href='javascript:;'>" + $(xdata).find("address > province:eq(" + i + ")").attr("name") + "</a>"); ;
                    }
                }
                //下面是下拉框
                $(".ddldisplay").toggle(
                        function() { $(this).children("div").show(); },
                        function() { $(this).children("div").hide(); }
                );
                $("#ddlSheng a").click(function() {
                    $(this).parents(".ddldisplay").find("span").text($(this).text());
                    $("#hid2").val($("#txtSheng").text()+$("#txtShi").text()+$("#txtqu").text());
                    var provinceName = $(this).parent().prev().text();
                    $("#ddlShi div").html("");
                    //根据省查找该省的所有下级市
                    for (var i = 0; i < $(xdata).find("address > province[name='" + provinceName + "'] > city").length; i++) {
                        $("#ddlShi div").append("<a href='javascript:;'>" + $(xdata).find("address > province[name='" + provinceName + "'] > city:eq(" + i + ")").attr("name") + "</a>");
                    }
                    $(this).parents(".ddldisplay").find("div").hide();
                    $("#ddlShi a").click(function() {
                        var provinceName = $("#ddlSheng").find("span").text(); //省
                        var cityName = $(this).text(); //市
                        $("#ddlShi span").text(cityName);
                        $("#hid2").val($("#txtSheng").text()+$("#txtShi").text()+$("#txtqu").text());
                        var country = $(xdata).find("address > province[name='" + provinceName + "'] > city[name='" + cityName + "'] > country");
                        var len = country.length;
                        $("#ddlQu div").html("");
                        for (var i = 0; i < len; i++) {
                            var countryName = $(xdata).find("address > province[name='" + provinceName + "'] > city[name='" + cityName + "'] > country:eq(" + i + ")").attr("name");
                            $("#ddlQu div").append("<a href='javascript:;'>" + countryName + "</a>");
                        }
                        $(this).parents(".ddldisplay").find("div").hide();
                        $("#ddlQu a").click(function() {
                            $("#ddlQu span").text($(this).text());
                            $("#hid2").val($("#txtSheng").text()+$("#txtShi").text()+$("#txtqu").text());
                        });                        
                    });
                });
                
            }
        });
    }
</script>

百度网盘下载地址:

http://pan.baidu.com/s/1c0gk67Q

解压后,用firefox或者项目运行打开。

或者直接使用三级全国城市数据:

http://www.suchso.com/projecteactual/%E5%85%A8%E5%9B%BD%E7%9C%81%E5%B8%82%E5%8E%BF%E5%8C%BA%E4%B8%89%E7%BA%A7%E6%95%B0%E6%8D%AEsql%E4%B8%8B%E8%BD%BD.html


转发注明:IT分享  http://www.suchso.com 

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询