当前位置:首页 > 科技 >

JS解析xml文件

发布时间:2017-09-11 12:09:15

JS解析xml文件 <!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">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<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">

< !--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<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>

,采集软件

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:潜江SEO http://qianjiang.raoyu.net