使用规则：
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")(""); 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")(""); $(qu).find("div")(""); //根据省查找该省的所有下级市，市下所有区 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")(""); 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>