日期:2014-05-17  浏览次数:20569 次

全新无bug的jquery+xml省市区三级联动,非常好用,真的非常好用,这次真的把所有的bug都修改了
使用规则:
1、放在IIS下浏览
2、遵守中华人民共和国有关法律法规使用
3、本着人人为我,我为人人的观念,这次下载需要1积分,你也可以下载老版本的去自己修改(哈哈)
4、要是不兼容任何一款浏览器,你们来骂我

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


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



HTML code

<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("