多級聯動系列——ajax調用XML實現三級聯動
ajax 使用起來特別的方便，再也不操心瀏覽器兼容問題了。用ajax調用XML頁面中的內容，來生成三級聯動，OK廢話不多說，跟著我一步步寫吧。
首先寫一個XML文件。data.xml
<?xml version="1.0" encoding="UTF-8"?> <list> <province name="河南" id=‘1‘> <city name="焦作" id=‘11‘> <area id=‘111‘>武陟</area> <area id=‘112‘>博愛</area> <area id=‘113‘>修武</area> </city> <city name="鄭州" id=‘12‘> <area id=‘121‘>金水區</area> <area id=‘122‘>二七區</area> <area id=‘123‘>中原區</area> </city> </province> <province name="河北" id=‘2‘> <city name="石家莊" id=‘21‘> <area id=‘211‘>趙縣</area> <area id=‘212‘>正定</area> <area id=‘213‘>平山</area> </city> <city name="承德" id=‘22‘> <area id=‘221‘>圍場</area> <area id=‘222‘>豐寧</area> <area id=‘223‘>隆化</area> </city> </province> <province name="山東" id=‘3‘> <city name="青島" id=‘31‘> <area id=‘311‘>李滄</area> <area id=‘312‘>嶗山</area> <area id=‘313‘>黃島</area> </city> <city name="日照" id=‘32‘> <area id=‘321‘>東港</area> <area id=‘322‘>嵐山</area> <area id=‘323‘>五蓮</area> </city> </province> </list>
然後就要用ajax調用XML 生成三級聯動 了
以下是代碼部分
<!DOCTYPE html>
<html>
<head>
<title>八部天龍</title>
<meata http-equiv="contetn-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="./jquery/jquery.js"></script>
<script type="text/javascript">
var xnlOb;
$(document).ready(function(){
$.get("data.xml",null,funciton(re){
xmlOb=$(re);//把文檔對象轉化為選擇器對象
//開始獲取全部的province標簽
var pOb=xmlOb.find("province");
var pName,pId;
$("[name=‘province‘]").append("<option value=‘0‘>請選擇</option>");
pOb.each(function(){
pName=$(this).attr(‘name‘);
//alert(pName);
pId=$(this).attr(‘id‘);
$("[name=‘province‘]").append("<option value=‘"+pId+"‘>"+pName+"</option>");
})
},‘xml‘);
})
function getCity(){
//首先獲取選擇的省份的名字 一級分類中
var pValue=$("[name=‘province‘]>:selected").text();
$("[name=‘city‘]").empty();//清空是為了防止多選幾次出現的多次加入反復內容
$("[name=‘city‘]").append("<option value=‘0‘>請選擇</option>");
//然後接著找省下的城市
xmlOb.find("province[name=‘"+pValue+"‘]").find("city").each(function(){
$("[name=‘city‘]").append("<option value=‘"+$(this).attr(‘id‘)+"‘>"+$(this).attr(‘name‘)+"</option>");
});
}
function getArea(){
var cValue=$("[name=‘city‘]>:selected").text();
$("[name=‘area‘]").empty();
$("[name=‘area‘]").append("<option value=‘0‘>請選擇</option>");
//接著去XML中找市以下的縣（區）
xnlOb.find("city[name=‘"+cValue+"‘]").find(‘area‘).each(function(){
$("[name=‘area‘]").append("<option value=‘"+$(this).attr(‘id‘)+"‘>"+$(this).text()+"</option>");
});
}
</script>
<body>
<select name="province" onchange="getCity();"></select>
<select name="city" onchange="getArea();"></select>
<select name="area"></select>
</body>
</head>
</html>OK。就是這種。
依據這個三級聯動。能夠擴展N級聯動。
原理都是一樣的。
好了，就到這裏了。
多級聯動系列——ajax調用XML實現三級聯動