通常項目當中都會用到三級聯動菜單,比如省市區的選擇等現將自己封裝的一個Area類拿來供大家參考一下,先看效果圖:
使用到最主要的JS文件共兩個
1:jquery.js(也可不使用,這裏只是方便監聽三個下拉列表,完全可以使用純JS代替)
2:area.js(自己寫的JS類)
function Area() {
var areaArray = new Array();
/**
* 初始化合集,在每次new出對象後,應當調用此方法
* @param xml 要讀取的地區xml文檔路徑
* @param flag 是否要讀取未開通的省市,如果爲空,則只讀取要開通的省市,不爲空,讀取所有省市
*/
this.init = function(xml, flag) {
var doc = this.loadxml(xml);
//獲取地區集合
var properties = doc.getElementsByTagName("a");
var count = 0;
for (var i = 0; i < properties.length; i++) {
var id = properties[i].getAttribute("i");
var name = properties[i].getAttribute("n");
var pid = properties[i].getAttribute("p");
//如果當前標誌不爲空,則代表獲取所有省份與地區,否則只獲取開通的省份
if (flag != null) {
areaArray[i] = [id,name,pid];
} else {
var state = properties[i].getAttribute("s");
if (state == "true") {
areaArray[count] = [id,name,pid];
count++;
}
}
}
};
/**
* 發送請求,獲取xml文檔,兼容FF與IE,一般外部不需要調用
* @param xml
*/
this.loadxml = function(xml) {
var xmlDoc;
if (window.ActiveXObject) {
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.load(xml);
} else if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument('', '', null);
xmlDoc.async = false;
xmlDoc.load(xml);
} else {
return null;
}
return xmlDoc;
};
/**
* 獲取每一級的下一級下拉列表,如獲取省級下拉列表,則pid爲""
* @param pid 父級ID,如要獲取市級,則傳入的PID爲省份ID
* @param selectId 如果要使下級列表自動選中某個列表,則直接傳入要選中的ID ,否則設爲NULL值
*/
this.getNextOption = function(pid, selectId) {
var options = "";
for (var i = 0; i < areaArray.length; i++) {
if (areaArray[i][2] == pid) {
if (selectId != null || selectId != "") {
if (selectId == areaArray[i][0]) {
options += "<option value=" + areaArray[i][0] + " selected>" + areaArray[i][1] + "</option>";
} else {
options += "<option value=" + areaArray[i][0] + ">" + areaArray[i][1] + "</option>";
}
} else {
options += "<option value=" + areaArray[i][0] + ">" + areaArray[i][1] + "</option>";
}
}
}
return options;
};
/**
* 示例
*/
// var area = new Area();
// area.init("x/area.xml", null);
//獲取省份下拉列表,這裏的PID爲"0",是因爲在XML文檔當中也是0
// var provinceOption = area.getNextOption("0", null);
//有了此optins就可以將它追加到要添加的select對象下,然後再做事件監聽,獲取下一級,以此類推!
//附上XML文檔示例
/*
<root>
//i當前省市ID p 當前省市父級ID 如:0爲省份 S是否開通標誌
<a i="107" n="安徽省" p="0" s="false"/>
<a i="83" n="寶山區" p="67" s="true"/>
<a i="93" n="北京市" p="0" s="false"/>
<a i="103" n="北京市" p="93" s="false"/>
<a i="77" n="長寧區" p="67" s="true"/>
<a i="105" n="朝陽區" p="103" s="false"/>
<a i="91" n="崇明縣" p="67" s="true"/>
<a i="89" n="奉賢區" p="67" s="true"/>
<a i="108" n="福建省" p="0" s="false"/>
<a i="109" n="甘肅省" p="0" s="false"/>
<a i="110" n="廣東省" p="0" s="false"/>
<a i="101" n="廣西區" p="0" s="false"/>
<a i="111" n="貴州省" p="0" s="false"/>
<root>
*/
}
這裏對常用的方法進行了封裝,支持IE與FF
下面是使用示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>三級下拉聯繫菜單示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--這裏導入含有area對象的外部JS文件-->
<script type="text/javascript" src="js/area.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var area = new Area();
area.init("xml/area.xml","all");
//初始化省份下拉列表
$("#province").html("<option>請選擇</option>"+area.getNextOption("0",null));
//監聽各個下拉列表
$("select").change(function(){
var value = $(this).val();
var id =$(this).attr("id");
var options = "<option>請選擇</option>"+area.getNextOption(value,null);
if(id=="province"){
$("#city").html(options);
}else if(id == "city"){
$("#county").html(options);
}
});
});
</script>
</head>
<body>
<!--省份列表-->
<select id="province"><option>請選擇</option></select>
<!--市級列表-->
<select id="city" ><option>請選擇</option></select>
<!--區縣列表-->
<select id="county"><option>請選擇</option></select>
</body>
</html>
XML文檔示例:
<root>
//i當前省市ID p 當前省市父級ID 如:0爲省份 S是否開通標誌
<a i="107" n="安徽省" p="0" s="false"/>
<a i="83" n="寶山區" p="67" s="true"/>
<a i="93" n="北京市" p="0" s="false"/>
<a i="103" n="北京市" p="93" s="false"/>
<a i="77" n="長寧區" p="67" s="true"/>
<a i="105" n="朝陽區" p="103" s="false"/>
<a i="91" n="崇明縣" p="67" s="true"/>
<a i="89" n="奉賢區" p="67" s="true"/>
<a i="108" n="福建省" p="0" s="false"/>
<a i="109" n="甘肅省" p="0" s="false"/>
<a i="110" n="廣東省" p="0" s="false"/>
<a i="101" n="廣西區" p="0" s="false"/>
<a i="111" n="貴州省" p="0" s="false"/>
<root>
最後附上,整個能運行的文件包,解壓,打開其中的test.html即可使用
以上代碼爲本人自己所寫,限於水平,錯誤之處,還請多指點.同時歡迎大家提供更好的思路與方法.