您的位置：首页 > Web前端 > JavaScript
用js写二级下拉列表框

2017-05-23 15:50 169 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="provinceID">
<option>选择省份</option>
<option>吉林省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<select id="cityID">
<option>选择城市</option>
</select>
<script type="text/javascript">

//定位省份下位框，同时添加内容改变事件
document.getElementById("provinceID").onchange=function(){

//清空原城市下拉框中的内容
var citySelectElement = document.getElementById("cityID");
var cityElementArray = citySelectElement.options;
var size = cityElementArray.length;
if(size > 1){
for(var i=size-1;i>0;i--){
citySelectElement.removeChild(cityElementArray[i]);
}
}

//定位用户选择的选项
var optionElement = this[this.selectedIndex];

//取得用户选中选项的内容，比如：山东省
var option = optionElement.firstChild.nodeValue;

//加载XML文件
var xmlDocument = loadXML();

//去XML文件中查找<province>标签的集合
var provinceElementArray = xmlDocument.getElementsByTagName("province");

//取得<province>标签的个数
size = provinceElementArray.length;

var provinceElement = null;

//循环迭代
for(var i=0;i<size;i++){

//判段下位框中的内容是否与XML文件中的name属性相同
if(provinceElementArray[i].getAttribute("name")==option){

provinceElement = provinceElementArray[i];

break;

}
}

if(provinceElement!=null){

//取得该<province>下对应的所有<city>子标签
var cityElementArray = provinceElement.getElementsByTagName("city");

//取得该<province>下对应的<city>子标签的个数
size = cityElementArray.length;

for(var i=0;i<size;i++){

//取得该<city>标签的内容
var city = cityElementArray[i].firstChild.nodeValue;

//创建<option>对象
var optionElement = document.createElement("option");

//创建文本对象
var txtElement = document.createTextNode(city);

//将文本对象加入到<option>对象
optionElement.appendChild(txtElement);

//将新创建的<option>对象加入到城市下拉框中
document.getElementById("cityID").appendChild(optionElement);

}
}
}

//加载xml文件
function loadXML(){
try{
//IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
//非IE
try {
xmlDoc=document.implementation.createDocument("","",null);
}catch(e){
alert(e.message);
return;
}
}
//异步加载关闭，即同步操作
//请求->响应->请求->响应(同步)
//请求->请求->请求->响应->响应->响应(异步)
xmlDoc.async=false;
xmlDoc.load("cities.xml");
return xmlDoc;
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航