jquery html css实现城市三级联动_第1页
jquery html css实现城市三级联动_第2页
jquery html css实现城市三级联动_第3页
jquery html css实现城市三级联动_第4页
jquery html css实现城市三级联动_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML代如下：<!DOCTYPEPUBLIC"-//W3C//DTDTransitional//EN"<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>Inserthere</title><linkhref="city.css"rel="stylesheet"type="text/css"/><scripttype="text/javascript"src="jquery-1.4.2.js"></script><scripttype="text/javascript"src="1.js"></script></head><body<divid="cityDiv"><aclass="aCity"<aclass="aCity"<aclass="aCity"</div></body></html>码如下：/**来xml件**析xml文的径**调，function(xml){}**解xml文返回的内*/$.get("area.xml",function(xml){vardocXmlvar$provinceElements=$(docXml).find("province");var$proEle=var$divEle=$("<divclass='dropdown_window'id='divPro'></div>");var$divEleCity=class='dropdown_window'style='margin-left:66px;'id='divCity'></div>var$divEleArea=$("<divclass='dropdown_window'style='margin-left:144px;'id='divArea'></div>所的省，写到第一个div中$provinceElements.each(function(index,domEle)var$provinceValue获省签var$optionElement$("<aclass='ziduan'href='javascript:void(0);'></a>");//$optionElement.attr("value",$provinceValue);$optionElement.text($provinceValue);div

$divEle.append($optionElement);});$("#aPro").click(function(){市区隐藏起来$("#divCity").hide();$("#divArea").hide();//alert($("#divPro"));$proEle.after($divEle);var$divPro=果div被藏让显$divPro.attr("style","display:block;");}});添件，获得选中值，并显示在$(".ziduan").live('click',function(){var$clickPro=给a签$("#aPro").text($clickPro);div$("#divPro").hide();市divvar$clickPro=$("#aPro").text();市div中容，清空$("#divCity").html("");面的a标的内容变请选择市请选择市");区div中容，清空$("#divArea").html("");面的a标的内容变请选择市请区县");//遍，找到与选中值相同的得到所有的市var=true;$provinceElements.each(function(index,domEle)var$provinceValue$(domEle).attr("name");if($flag){if($clickPro==$provinceValue)$flag=false;var$cityElements$(domEle).find("city");市$cityElements.each(function(index,domEle){var$cityValue$(domEle).attr("name");标var$optionElement$("<aclass='ziduanCity'href='javascript:void(0);'></a>")

//$optionElement.attr("value",$provinceValue);$optionElement.text($cityValue);div$divEleCity.append($optionElement);});}}});});市弹出下拉框$("#aCity").click(function(){省区隐藏起来$("#divPro").hide();$("#divArea").hide();省内容，如果没有选择不显示divvar$clickPro=$("#aPro").text();选择省)<0){选了省var$divCity//alert($divCity);果的被隐，他示$divCity.attr("style","margin-left:66px;display:block;");}到body$proEle.after($divEleCity);}});添件，获得选中值，并显示在页面$(".ziduanCity").live('click',function(){var$clickCity给a签$("#aCity").text($clickCity);div$("#divCity").hide();var$clickCityvar$clickPro=区div中容，清空$("#divArea").html("");面的a标的内容变请选择市请区县");//遍，找到与选中值相同的得到所有的市var=true;$provinceElements.each(function(index,domEle)

var$provinceValue$(domEle).attr("name");if($clickPro==$provinceValue)var$cityElements$(domEle).find("city");$cityElements.each(function(index,domEle)var$cityValue$(domEle).attr("name");if($clickCity$cityValue){var$countyElements=$(domEle).find("county");$countyElements.each(function(index,domEle)var$countyValue=$(domEle).attr("name");var$optionElement$("<aclass='ziduanErea'href='javascript:void(0);'></a>")//$optionElement.attr("value",$provinceValue);$optionElement.text($countyValue);div$divEleArea.append($optionElement);});}});}});});$("#aArea").click(function(){省隐藏起来$("#divPro").hide();$("#divCity").hide();省内容，如果没有选择不显示divvar$clickPro=$("#aPro").text();var$clickCity$("#aCity").text();选择省)<0&&')<0var$divArea示//alert($divCity);果的div被藏让显$divArea.attr("style","margin-left:144px;display:block;");}到body$proEle.after($divEleArea);}});添件，获得选中值，并显示在页面上$(".ziduanErea").live('click',function(){省市隐藏起来var$clickArea给a签$("#aArea").text($clickArea);

div$("#divArea").hide();});});CSS代下：{margin:0;padding:0;}.dropdown_window{background-color:#FFFFFF;border:1px#CBE3F7;margin:0;padding:7pxwidth:257px;overflow:hidden;}.aCity{background:url(xiala.jpg)no-repeatrighttoptransparent;border:1px#7F9DB9;color:black;cursor:pointer;font-size:height:line-height:margin:0;padding:4px25px2pxtext-decoration:}.ziduan{width:64px;height:24px;color:#004B91;text-decoration:font-size:12px;line-height:24px;text-align:center;display:block;float:left;}.ziduan:hover{color:#F60;text-decoration:underline;}

.ziduanCity{height:24px;color:#004B91;text-decoration:font-size:12px;line-height:24px;text-align:center;display:block;float:left;margin-left:5px;margin-right:5px;}.ziduanCity:hover{color:#F60;text-decoration:underlin

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论