一、allarea.xml
<?xml version="1.0" encoding="UTF-8" ?>
<allarea>
<area>
<id>1</id>
<title>北京</title>
</area>
<area>
<id>2</id>
<title>天津</title>
</area>
<area>
<id>3</id>
<title>南京</title>
</area>
</allarea>
二、ajax_select.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>使用AJax解析XML，并生成下拉列表框</title>
</head>
<script type="text/javascript">
var xmlHttp; // Ajax 核心对象名称
function createXMLHttp() // 创建 XMLHttpRequest 核心对象
{
if(window.XMLHttpRequest) // 判断当前使用的浏览器类型
{
xmlHttp = new XMLHttpRequest; // 表示使用的是 FireFox 内核浏览器
}
else
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getCity()
{
createXMLHttp(); // 建立 xmlHttp 核心对象
xmlHttp.open("POST", "allarea.xml"); // 设置一个请求
// 设置请求完成之后处理的回调函数
xmlHttp.onreadystatechange = getCityCallback;
xmlHttp.send(null); // 发送请求，不传递任何参数
}
function getCityCallback() // 定义回调函数
{
if(xmlHttp.readyState == 4) // 数据返回完毕
{
if(xmlHttp.status == 200)
{
// 取得 allarea 节点下的全部节点
var allarea = xmlHttp.responseXML.getElementsByTagName("allarea")[0].childNodes;
// 取得下拉列表框 city 的对象
var select = document.getElementById("city"); //
select.length = 1; // 显示一个内容
select.options[0].selected = true; // 设置第一个为选择状态
// 循环 all 下的子节点
for(var i = 0; i < allarea.length; i++)
{
var area = allarea[i]; // 取得每一个 <area>
// 创建 option 元素
var option = document.createElement("option");
// 取得每一个 <area> 中的 <id> 元素内容
var id = area.getElementsByTagName("id")[0].firstChild.nodeValue;
// 取得每一个 <area> 中的 <id> 元素内容
var title = area.getElementsByTagName("title")[0].firstChild.nodeValue;
// 在 option 元素中设置显示的内容
option.setAttribute("value", id);
// 在 option 中添加显示的文本内容
option.appendChild(document.createTextNode(title));
// 在下拉列表框中加入 optioon 属性
select.appendChild(option);
}
}
}
}
</script>
<body onLoad="getCity()"> <!-- 页面加载时调用 -->
<form action="" method="post">
请选择喜欢的城市：<select name="city">
<option value="0"> - 请选择城市 - </option>
</select>
</form>
</body>
</html>
扫一扫
1834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
