整容说文库 > 程序代码 > 教育资讯

全新无bug的jquery+xml省市区三级联动,非常好用,真的非常好用,这次真的把所有的bug都修改了

来源:学生作业帮助网 编辑:整容说文库 时间:2021/01/18 21:09:28 程序代码
全新无bug的jquery+xml省市区三级联动,非常好用,真的非常好用,这次真的把所有的bug都修改了程序代码
使用规则:
1、放在IIS下浏览
2、遵守中华人民共和国有关法律法规使用
3、本着人人为我,我为人人的观念,这次下载需要1积分,你也可以下载老版本的去自己修改(哈哈)
4、要是不兼容任何一款浏览器,你们来骂我

注:
   请务必放在IIS下浏览,不然会出现“fail”,或者你直接用VS环境运行也可以的


修正多个Bug优美的jquery+xml城市3级联动效果(放在IIS下运行) 下载




<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>3级联动</title>
    <script src="jquery.js" type="text/javascript"></script>
    <style type="text/css">
        .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(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">
    <div>
    <div class="ddlShouhuo ddldisplay" id="ddlSheng">
        <span id="txtSheng">(省/直辖市)</span>
        <div></div>
    </div>
    <div class="ddlShouhuo ddldisplay" id="ddlShi">
        <span id="txtShi">(地区/市)</span>
        <div></div>
    </div>
    <div class="ddlShouhuo ddldisplay" id="ddlQu">
        <span id="txtqu">(区/县)</span>
        <div></div>
    </div>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    $(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) {
                var sheng,shi,qu;
                sheng = $("#ddlSheng");
                shi = $("#ddlShi");
                qu = $("#ddlQu");
                if ($(xdata) != null) {
                    $(sheng).find("div").html("");
                    for (var i = 0; i < $(xdata).find("address > province").length; i++) {
                        $(sheng).find("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(); }
                );
                $(sheng).find("a").click(function() {
                    $(sheng).find("span").text($(this).text());
                    var provinceName = $(this).text();
                    //清空市和区的列表,以免重复添加
                    $(shi).find("div").html("");
                    $(qu).find("div").html("");
                    //根据省查找该省的所有下级市,市下所有区
                    for (var i = 0; i < $(xdata).find("address > province[name='" + provinceName + "'] > city").length; i++) {
                        $(shi).find("div").append("<a href='javascript:;'>" + $(xdata).find("address > province[name='" + provinceName + "'] > city:eq(" + i + ")").attr("name") + "</a>");
                    }
                    for (var i = 0; i < $(xdata).find("address > province[name='" + $(this).text() + "'] > city[name='"+$(shi).find("div a:eq(0)").text()+"'] > country").length; i++) {
                        var txt = $(xdata).find("address > province[name='" + $(this).text() + "'] > city[name='"+$(shi).find("div a:eq(0)").text()+"'] > country:eq("+i+")").attr("name");
                        $(qu).find("div").append("<a href='javascript:;'>" + txt + "</a>");
                    }
                    $(qu).find("a").click(function() {
                        $(qu).find("span").text($(this).text());
                    });
                    //隐藏列表
                    $(this).parents(".ddldisplay").find("div").hide();
                    $(shi).find("span").text($(shi).find("div a:eq(0)").text());
                    $(qu).find("span").text($(qu).find("div a:eq(0)").text());
                    $(shi).find("a").click(function() {
                        var provinceName = $(sheng).find("span").text(); //省
                        var cityName = $(this).text(); //市
                        $(shi).find("span").text(cityName);
                        var country = $(xdata).find("address > province[name='" + provinceName + "'] > city[name='" + cityName + "'] > country");
                        var len = country.length;
                        $(qu).find("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");
                            $(qu).find("div").append("<a href='javascript:;'>" + countryName + "</a>");
                        }
                        //隐藏列表
                        $(this).parents(".ddldisplay").find("div").hide();
                        $(qu).find("span").text($(qu).find("div a:eq(0)").text());
                        $(qu).find("a").click(function() {
                            $(qu).find("span").text($(this).text());
                        });                        
                    });
                });
                
            }
        });
    }
</script>
该回复于2012-05-25 15:31:02被版主删除
先顶下,再下载用一下
多谢分享
下载啦
希望这次不会出线不兼容,强烈建议LZ把样式也改一下太土气啦。
引用 4 楼  的回复:
希望这次不会出线不兼容,强烈建议LZ把样式也改一下太土气啦。


真的没骗你,真的都改了,至于样式也要改,不能这样吧,至于你想要什么样的,你可以自己修改一下样式就好了
该回复于2012-05-25 17:06:25被版主删除
哈哈哈哈哈,和我写的差不多.支持
该回复于2012-05-26 09:34:35被版主删除
又来了, 向楼主专业精神致敬
楼主推动了中国软件业的进步啊
真不错。收了。
good !!
我  收了
引用 10 楼  的回复:
楼主推动了中国软件业的进步啊


+1
引用 14 楼  的回复:
引用 10 楼  的回复:

楼主推动了中国软件业的进步啊


+1


+2
选择速度有点慢
选择速度有点慢
哥们不能用啊 打开就没有下拉列表,点击也没有反应
用火狐浏览器
楼主,请教怎样获取数据?
很不错,不过能加些样式美好下就更好了!!!
程序代码