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

JS加强总结第三天（JS解析xml文件案例）

2013-03-13 19:59 483 查看

<!DOCTYPE html>

<html>

<head>

<title>js_city.html</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; charset=UTF-8">



<script type="text/javascript" src="./js/js_xml.js"></script>

</head>

<body>

<div align="center">

<select id="province"></select>

<select id="city"></select>

</div>

</body>

</html>

<?xml version="1.0" encoding="UTF-8"?>

<china>

<province name="北京市">

<city>海淀区</city>

<city>朝阳区</city>

<city>大兴区</city>

<city>昌平区</city>

</province>

<province name="天津市">

<city>北辰区</city>

<city>和平区</city>

<city>虹桥区</city>

<city>AA区</city>

</province>

<province name="上海市">

<city>BB区</city>

<city>CC区</city>

<city>DD区</city>

<city>MM区</city>

</province>

</china>

<!DOCTYPE html>

<html>

<head>

<title>js_select.html</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; charset=UTF-8">



<script type="text/javascript">

window.onload = function() {

// 采用数组来存放 js原生格式，二级联动

var provinces = [ {

id : '1',

name : '北京',

city : [ '海淀区', '朝阳区', '大兴区' ]

}, {

id : '2',

name : '天津',

city : [ '北辰区', '和平区', '虹桥区' ]

}, {

id : '3',

name : '上海',

city : [ 'A区', 'B区', 'C区' ]

}, {

id : '4',

name : '重庆',

city : [ 'WW区', 'EE区', 'TT区' ]

} ];

// 页面加载时，显示省份

var domProvinces = document.getElementById("province");

// 遍历省份集合

for ( var i = 0; i < provinces.length; i++) {

// 获取具体省份对象

var pro = provinces[i];

// 创建元素节点

var option = document.createElement("option");

option.setAttribute("value", pro.id); //为option添加value属性

var textNode = document.createTextNode(pro.name); //创建文本节点

option.appendChild(textNode);

domProvinces.appendChild(option);

}

//当省份发生变化时，把相应的市区显示给用户

var domcity = document.getElementById("city");

domProvinces.onchange = function() {

//清除数据

domcity.length = 1;

for ( var i = 0; i < provinces.length; i++) {

//获取具体省份对象

var dpro = provinces[i];

if (this.value == dpro.id) {

var city = dpro.city;

for ( var j = 0; j < city.length; j++) {//创建元素节点

var doption = document.createElement("option");

//创建文本节点

var dtextNode = document.createTextNode(city[j]);

doption.appendChild(dtextNode);

//把创建的option节点添加到id=city的select中

domcity.appendChild(doption);

}

break;

}else{

continue;

}

}

}

}

</script>

</head>

<body>

<br>

<select id="province">

<option value="-1">请选择省份</option>

</select>

<select id="city">

<option value="-1">请选择市区</option>

</select>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航