使用到最主要的JS文件共两个
1:jquery.js(也可不使用,这里只是方便监听三个下拉列表,完全可以使用纯JS代替)
2:area.js(自己写的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>
*/
}
html代码:
<pre name="code" class="html"><!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文档示例:
<span style="font-family:Helvetica, Tahoma, Arial, sans-serif;"><span style="font-size: 14px; line-height: 25.2000007629395px;"></span></span><pre name="code" class="html"><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>