XML：使用DOM技术解析xML文件中的城市，实现select级联选择
中国的城市xml格式：cities.xml
下面，使用DOM解析xML文件中的城市，实现select级联选择
最基本的方法：selecCity.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用DOM解析city.xml,进行城市二级级联操作</title>
<script type="text/javascript">
//给加载页面绑定事件
window.onload = function(){
//从cities.xml文档中获取所有的#province节点
//创建并添加所有的#province节点
var provinceEle = document.getElementById('province');
var xmlDoc = parseXML("cities.xml");
provinceNodes = xmlDoc.getElementsByTagName('province');
for (var i = 0; i < provinceNodes.length; i++) {
var paraNode = provinceNodes[i].getAttributeNode("name");//属性节点
var optionNode = document.createElement('option'); //创建省份province的option子节点
optionNode.innerHTML = paraNode.nodeValue;
provinceEle.appendChild(optionNode);
};
//为#province添加change响应事件
provinceEle.onchange = function(){
//先把#city节点除第一个子节点外都移除（注意：每清除一次，数组是变化的）
var cityNode = document.getElementById('city');
var optionNodes = cityNode.childNodes;
var len = optionNodes.length;
for (var i = 2; i <len; i++) {
cityNode.removeChild(optionNodes[2]);
}
if(this.value == "请选择...") return;
//获取对应的所有#city节点
for (var i = 0; i < provinceNodes.length; i++) {
var paraNode = provinceNodes[i].getAttributeNode("name");//属性节点
if (paraNode.nodeValue == this.value) {
//接着获取每一个#province对应的#city节点
var allsubTextNodes = provinceNodes[i].childNodes;
for (var k = 0; k < allsubTextNodes.length; k++) {
var optionNode = document.createElement('option');//创建城市city的option子节点
optionNode.innerHTML = allsubTextNodes[k].firstChild.nodeValue;
cityNode.appendChild(optionNode);
}
}
}
}
//创建XML解析器
function parseXML(xmlFile){
try //Internet Explorer---ie浏览器的解析器创建方式如下：
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try //Firefox, Mozilla, Opera, etc. 火狐等浏览器的创建方式。
{
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e)
{
alert(e.message);
return; //如果创建不成功，就直接返回，不往下走。
}
}
if(xmlDoc!=null){
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
return xmlDoc; //返回创建好的解析器，传给调用者。
}
}
</script>
</head>
<body>
中国城市二级级联选择<br>
<select id="province">
<option>请选择...</option>
</select>
<select id="city">
<option>请选择...</option>
</select>
</body>
</html>
其实，还有一个更简单的方法，使用XPath技术，下面的实现效果是一样哟：selecCity2.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用DOM解析city.xml,进行城市二级级联操作</title>
<script type="text/javascript">
//给加载页面绑定事件
window.onload = function(){
//从cities.xml文档中获取所有的#province节点
//创建并添加所有的#province节点
var provinceEle = document.getElementById('province');
var xmlDoc = parseXML("cities.xml");
var xmlPath = "/china/province" //获取所有的#province属性节点
var allProvinces = returnNodes(xmlDoc,xmlPath);
alert(allProvinces.length);
alert(returnNodes(xmlDoc,xmlPath).length);
for (var i = 0; i < allProvinces.length; i++) {
var nameNode = allProvinces[i].getAttributeNode("name");//属性节点
var optionNode = document.createElement('option'); //创建省份province的option子节点
optionNode.innerHTML = nameNode.nodeValue;
provinceEle.appendChild(optionNode);
};
//为#province添加change响应事件
provinceEle.onchange = function(){
//先把#city节点除第一个子节点外都移除（注意：每清除一次，数组是变化的）
var cityNode = document.getElementById('city');
var cityOptions = cityNode.childNodes;
var len = cityOptions.length;
for (var i = 2; i <len; i++) {
cityNode.removeChild(cityOptions[2]);
}
//省份没有选择,直接不执行下面的语句
if (this.value == "请选择...") return;
//获取#province对应下的所有子节点#city
xmlPath = "//province[@name='"+this.value+"']"
var optionNodes = returnNodes(xmlDoc,xmlPath);
var cityNodes = optionNodes[0].childNodes;
for (var i = 0; i < cityNodes.length; i++) {
var optionNode = document.createElement('option');//创建城市city的option子节点
optionNode.innerHTML = cityNodes[i].firstChild.nodeValue;
cityNode.appendChild(optionNode);
}
}
//创建XML解析器
function parseXML(xmlFile){
try //Internet Explorer---ie浏览器的解析器创建方式如下：
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try //Firefox, Mozilla, Opera, etc. 火狐等浏览器的创建方式。
{
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e)
{
alert(e.message);
return; //如果创建不成功，就直接返回，不往下走。
}
}
if(xmlDoc!=null){
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
return xmlDoc; //返回创建好的解析器，传给调用者。
}
//使用XPath技术获取所有的元素节点
function returnNodes(xmlDoc,xmlPath) {
// code for IE
if (window.ActiveXObject)
{
return xmlDoc.selectNodes(xmlPath);
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
return xmlDoc.evaluate(xmlPath, xmlDoc, null, XPathResult.ANY_TYPE,null);
}
}
}
</script>
</head>
<body>
中国城市二级级联选择<br>
<select id="province">
<option>请选择...</option>
</select>
<select id="city">
<option>请选择...</option>
</select>
</body>
</html>
拓展：判断浏览器类型，这儿还给出判断一个浏览器的方法：
//判断浏览器 function myBrowser(){ //取得浏览器的userAgent字符串 var explorer = window.navigator.userAgent ; //iE if (explorer.indexOf("MSIE") > -1 && explorer.indexOf("compatible") > -1 && !explorer.indexOf("Opera")) { return "IE"; } //firefox else if (explorer.indexOf("Firefox") > -1) { return "Firefox"; } //Chrome else if(explorer.indexOf("Chrome") > -1){ return "Chrome"; } //Opera else if(explorer.indexOf("Opera") > -1){ return "Opera"; } //Safari else if(explorer.indexOf("Safari") > -1){ return "Safari"; } }
效果图显示：
程序猿神奇的手，每时每刻，这双手都在改变着世界的交互方式！
本文转自当天真遇到现实博客园博客，原文链接：http://www.cnblogs.com/XYQ-208910/p/5871439.html，如需转载请自行联系原作者