前段时间做一个项目,需要动态的从后台数据里面里面提取相应国家、省份及城市的信息,实现的过程就是通过下拉菜单先选择一个国家,然后在另一个下拉框里面是这个国家的省份,再通过选择的省份填充另外一个城市的下拉框,其实通过级联查询的方式完全可以实现,或者一次性通过数组读取国家省份及城市的信息,然后填充这几个下拉框,觉得这样也不方便,想来想去何不用DOM的方式来实现了,思路如下:
第一,通过后台程序生成一个XML文件,节点分别为:国家——》省——》城市
第二,通过前台的的DOM提取这个XML文件
第三,通过脚本加载这个XML文件到相应的下拉框,首先加载国家,当选择某个国家的时候通过XML的查询语句再填充相应的省,依次类推,填充省下的城市,实现级联查询,省去了不少麻烦:)
生成XML文件的方式在这里就不提了,只把相应读XML文件的脚本贴出来,便于自己记忆:)
<html>
<head>
<title>city.htm</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; GBK">
<script language="javascript">
var xmlDoc;
function init(initProvince, initCity) {//参数1:初始化时的省;参数2:初始化时的城市
var sltOne = document.getElementById("classId");
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("cityXml.jsp");
if (xmlDoc.parseError.errorCode != 0) {
var myErr = xmlDoc.parseError;
alert("You have error " + myErr.reason);
} else {
//alert(xmlDoc.xml);
var oNodeList;
var sonNode;
var oNode;
objNodeList = xmlDoc.getElementsByTagName("province");
for (var i=0; i<objNodeList.length; i++) {
oNode = objNodeList.item(i)
var opt = document.createElement("OPTION");
sltOne.add(opt);
opt.innerText = oNode.getAttribute("name");
opt.value = oNode.getAttribute("id");
if(opt.innerValue == initProvince)
opt.selected = true;
}
if(initCity.length > 0 && initProvince.length > 0)
getCityByProvince(initProvince, initCity);
}
}
function getCityByProvince(initProvince, initCity) {
var sltTwo = document.getElementById("NclassIdt");
sltTwo.length = 0;
var curNode;//当前节点
var cNode;//节点
var xpath;//路径
var name;//区域名称
name = initProvince;//event.srcElement.value;
xpath = "/catalog/province[@name='" + name + "']/city"
//alert(xpath);
cNode = xmlDoc.selectNodes(xpath);
//alert(cNode.length);
if(cNode.length == 0) {
var opt = document.createElement("OPTION");
sltTwo.add(opt);
opt.value = "null";
opt.innerText = "选择城市";
}
for(var i=0;i<cNode.length;i++) {
curNode = cNode.item(i);
var opt = document.createElement("OPTION");
sltTwo.add(opt);
opt.value = curNode.getAttribute("name");
opt.innerText = curNode.getAttribute("name");
if(opt.value == initCity)
opt.selected = true;
}
}
</script>
</head>
<body οnlοad="init('','')">
This is my HTML page. <br>
<select id=sltOne οnchange="getVenuesByLocation(this.value)">
<option value="null">选择省
</select>
<select id=sltTwo>
<option value="null">选择城市
</select>
</body>
</html>