jqueryhtmlcss实现城市三级联动.docxVIP

HTML代码如下： lt;!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional/ZEN gt; lt;htmlgt; lt;headgt; lt;meta http-equiv=Content-Type content=text/html; charset=UTF-8gt; lt;titlegt;Insert title herelt;/titlegt; lt;link href=city.css rel=stylesheet type=text/css /gt; lt;script type=text/javascript src=jquery-1.4.2.jsgt;lt;/scriptgt; lt;script type=text/javascript src=1.jsgt;lt;/scriptgt; lt;/headgt; lt;body gt; lt;div id=cityDivgt; lt;a class=aCity id=aPro gt; 请选择省 lt;/agt; lt;a class=aCity id=aCitygt; 请选择市 lt;/agt; lt;a class=aCity id=aAreagt; 请选择区县 lt;/agt; lt;/divgt; lt;/bodygt; lt;/htmlgt; JavaScript代码如下： /* $.get()或$.post()方法来解析xml文件 * url ：指定要解析的xml文件的路径 * callback :回调函数，function(xml)(} * xml :解析xml文件返回的内容 */ $.get(area.xml, function (xml) ( var docXml = xml; var $provinceElements = $(docXml).find(province); var $proEle = $(#cityDiv); //a 链接的 div var $divEle = $(lt;div class=dropdown_window id=divProgt;lt;/divgt;); var $divEleCity = $(lt;div class=dropdown_window style=margin-left:66px; id=divCitygt;lt;/divgt;); var $divEleArea = $(lt;div class=dropdown_window style=margin-left:144px; id=divAreagt;lt;/divgt;); 〃遍历所有的省，写到第一个 div中 $provinceElements.each(function (index, domEle) ( var $provinceValue = $(domEle).attr(name”); // 获得省的值 //创建span标签 var $optionElement = $(lt;a class=ziduan href=javascript:void(0); gt;lt;/agt;); // $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 = $(#divPro);// 获得 div,判断是否显示 if($divPro.is(:hidden)){//如果省的div被隐藏，让他显示 $divPro.attr(style”,display:block;); } }); 〃给省添加click事件，获得选中的值，并显示在 $(.ziduan).live(click,function () { var $clickPro = $(this).text();// 获得点击的省的名称 〃赋值给省a标签 $(#aPro).text($clickPro); //隐藏div $(#divPro).hide(); 〃创建市的div var $clickPro = $(#aPro).text(); //获得市div中的内容，清空 $(#divCity).html(); //市页面上的a标签中的内容变为请选择市 $(#aCity).