您的位置：首页 > Web前端 > JavaScript

JavaScript DOM编程学习笔记-select级联选择

2016-02-04 11:04 609 查看

以下代码浏览器兼容性不好。

[code=php;toolbar:false"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
//
window.onload = function() {
//为province添加onchange响应函数
document.getElementById("province").onchange = function(){
//alert("ochange");
var cityNode = document.getElementById("city");
var cityNodeOptions = cityNode.getElementsByTagName("option");
//清空cityNode上的节点
for(var i = cityNode.length; i > 1; i--){
cityNode.removeChild(cityNodeOptions[i-1]);
}
//如果前一个select是“请选择”，则不执行操作
var provinceVal = this.value;
if(provinceVal == ""){
return;
}

var xmlDoc = parseXml("cities.xml");
//var provinces = xmlDoc.getElementsByTagName("province");
//alert(provinces.length);

//直接使用 XPath 技术查找 XML 文档中匹配的节点.
var provinceEles = xmlDoc.selectNodes("//province[@name='" + provinceVal + "']");

var cityNodes = provinceEles[0].getElementsByTagName("city");
//alert(cityNodes.length);
for(var i = 0; i < cityNodes.length; i++){
//alert(cityNodes[i].firstChild.nodeValue);
var cityText = cityNodes[i].firstChild.nodeValue;
var cityTextNode = document.createTextNode(cityText);
var optionNode = document.createElement("option");
optionNode.appendChild(cityTextNode);
cityNode.appendChild(optionNode);
}
}

//js 解析 xml 文档的函数, 只支持 ie
function parseXml(fileName){
    //IE 内核的浏览器
    if (window.ActiveXObject) {
        //创建 DOM 解析器
        var doc = new ActiveXObject("Microsoft.XMLDOM");
        doc.async = "false";
        //加载 XML 文档, 获取 XML 文档对象
        doc.load(fileName);
        return doc;
    }
}
}
</script>
</head>
<body>
<select id="province">
<option value="">请选择...</option>
<option value="河北省">河北省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select>

<select id="city"><option value="...">请选择...</option></select>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JavaScript DOM编程 学习笔记-select级联选择

JavaScript DOM编程学习笔记-select级联选择