日期:2014-05-17 浏览次数:20591 次
<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("