HTML代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="city.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="1.js"></script>
</head>
<body >
<div id="cityDiv">
<a id="aPro" >請(qǐng)選擇省</a>
<a id="aCity">請(qǐng)選擇市</a>
<a id="aArea">請(qǐng)選擇區(qū)縣</a>
</div>
</body>
</html>
JavaScript代碼如下：
/*
* $.get()或$.post()方法來解析xml文件
* * url：指定要解析的xml文件的路徑
* * callback：回調(diào)函數(shù)，function(xml){}
* * xml：解析xml文件返回的內(nèi)容
*/
$.get("area.xml", function (xml) {
var docXml = xml;
var $provinceElements = $(docXml).find("province");
var $proEle = $("#cityDiv"); //a鏈接的div
var $divEle = $("<div class='dropdown_window' id='divPro'></div> ");
var $divEleCity = $("<div class='dropdown_window' style='margin-left:66px;' id='divCity'></div> ");
var $divEleArea = $("<div class='dropdown_window' style='margin-left:144px;' id='divArea'></div> ");
//遍歷所有的省，寫到第一個(gè)div中
$provinceElements.each(function (index, domEle) {
var $provinceValue = $(domEle).attr("name"); //獲得省的值
//創(chuàng)建span標(biāo)簽
var $optionElement = $("<a class='ziduan' href='javascript:void(0);' ></a>");
// $optionElement.attr("value",$provinceValue);
$optionElement.text($provinceValue);
//創(chuàng)建div
$divEle.append($optionElement);
});
$("#aPro").click(function () {
//先把市，區(qū)隱藏起來
$("#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();//獲得點(diǎn)擊的省的名稱
//賦值給省a標(biāo)簽
$("#aPro").text($clickPro);
//隱藏div
$("#divPro").hide();
//創(chuàng)建市的div
var $clickPro = $("#aPro").text();
//獲得市div中的內(nèi)容，清空
$("#divCity").html("");
//市頁面上的a標(biāo)簽中的內(nèi)容變?yōu)檎?qǐng)選擇市
$("#aCity").text("請(qǐng)選擇市");
//獲得區(qū)div中的內(nèi)容，清空
$("#divArea").html("");
//市頁面上的a標(biāo)簽中的內(nèi)容變?yōu)檎?qǐng)選擇市
$("#aArea").text("請(qǐng)選擇區(qū)縣");
// 遍歷省，找到與選中值相同的，得到所有的市
var $flag = 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");
//創(chuàng)建option標(biāo)簽
var $optionElement = $("<a class='ziduanCity' href='javascript:void(0);' ></a>");
// $optionElement.attr("value",$provinceValue);
$optionElement.text($cityValue);
//創(chuàng)建div
$divEleCity.append($optionElement);
});
}
}
});
});
//點(diǎn)擊市，彈出下拉框
$("#aCity").click(function(){
//先把省，區(qū)隱藏起來
$("#divPro").hide();
$("#divArea").hide();
//獲得省的內(nèi)容，如果沒有選擇就不顯示div
var $clickPro = $("#aPro").text();
if($clickPro.indexOf('請(qǐng)選擇省')<0){
//已經(jīng)選擇了省
var $divCity = $("#divCity");//獲得div,判斷是否顯示
//alert($divCity);
if($divCity.is(":hidden")){//如果省的div被隱藏，讓他顯示
$divCity.attr("style","margin-left:66px;display:block;");
}
//添加到body中
$proEle.after($divEleCity);
}
});
//給市添加click事件，獲得選中的值，并顯示在頁面
$(".ziduanCity").live('click',function () {
var $clickCity = $(this).text();//獲得點(diǎn)擊的市的名稱
//賦值給市a標(biāo)簽
$("#aCity").text($clickCity);
//隱藏div
$("#divCity").hide();
var $clickCity = $(this).text();//獲得點(diǎn)擊的市的名稱
var $clickPro = $("#aPro").text();//獲得省
//獲得區(qū)div中的內(nèi)容，清空
$("#divArea").html("");
//市頁面上的a標(biāo)簽中的內(nèi)容變?yōu)檎?qǐng)選擇市
$("#aArea").text("請(qǐng)選擇區(qū)縣");
// 遍歷省，找到與選中值相同的，得到所有的市
var $flag = 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 = $("<a class='ziduanErea' href='javascript:void(0);' ></a>");
// $optionElement.attr("value",$provinceValue);
$optionElement.text($countyValue);
//創(chuàng)建div
$divEleArea.append($optionElement);
});
}
});
}
});
});
$("#aArea").click(function(){
//先把省市隱藏起來
$("#divPro").hide();
$("#divCity").hide();
//獲得省的內(nèi)容，如果沒有選擇就不顯示div
var $clickPro = $("#aPro").text();
var $clickCity = $("#aCity").text();
if($clickPro.indexOf('請(qǐng)選擇省')<0 && $clickCity.indexOf('請(qǐng)選擇市')<0 ){
var $divArea = $("#divArea");//獲得div,判斷是否顯示
//alert($divCity);
if($divArea.is(":hidden")){//如果省的div被隱藏，讓他顯示
$divArea.attr("style","margin-left:144px;display:block;");
}
//添加到body中
$proEle.after($divEleArea);
}
});
//給區(qū)添加click事件，獲得選中的值，并顯示在頁面上
$(".ziduanErea").live('click',function () {
//先把省，市隱藏起來
var $clickArea = $(this).text();//獲得點(diǎn)擊的區(qū)的名稱
//賦值給省a標(biāo)簽
$("#aArea").text($clickArea);
//隱藏div
$("#divArea").hide();
});
});
CSS代碼如下：
{
margin:0;
padding:0;}
.dropdown_window{
background-color: #FFFFFF;
border: 1px solid #CBE3F7;
margin: 0;
padding: 7px 0 15px 15px;
width: 257px;
overflow:hidden;
}
.aCity{
background:url(xiala.jpg) no-repeat scroll right top transparent;
border: 1px solid #7F9DB9;
color: black;
cursor: pointer;
font-size: 12px;
height: 12px;
line-height: 18px;
margin: 0;
padding: 4px 25px 2px 7px;
text-decoration: none;
}
.ziduan{
width:64px;
height:24px;
color: #004B91;
text-decoration: none;
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: none;
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:underline;
}
.ziduanErea{
width:auto;
height:24px;
color: #004B91;
text-decoration: none;
font-size:12px;
line-height:24px;
text-align:center;
display:block;
float:left;
margin-left:5px;
margin-right:5px;
}
.ziduanErea:hover{
color:#F60;
text-decoration:underline;
}