以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』  (http://bbs.xml.org.cn/list.asp?boardid=22)
----  XML在Web中的简单应用  (http://bbs.xml.org.cn/dispbbs.asp?boardid=22&rootid=&id=47574)

--  作者：panguan
--  发布时间：5/25/2007 9:24:00 PM

--  XML在Web中的简单应用
it技巧站为大家提供最全的电脑使用技巧和操作当中的小窍门,欢迎大家光临!
更多精彩:[http://www.itjq.cn]

首先建立一个Area.html，很简单包含一个省份的select元素和一个城市的界面元素：

<html>
<head>
<title>Area Demo</title>
</head>
<body>
<select id="province" size=1 onchange="loadCity()">
<option value="city01.xml">  江苏  </option>
<option value="city02.xml">  &ordm;湖南 </option>
<option value="city03.xml">  湖北  </option>
</select>
<select id="city" size=1>
</select>
<xml id="xmlobj"></xml>
<script language="javascript" type="text/javascript">
var provobj = document.all("province");
var cityobj = document.all("city");
var xmlhttp = document.all("xmlobj");
loadCity();
/**
* 装载城市数据
*/
function loadCity() {
cityobj.options.length = 0;
var file = provobj.options[provobj.selectedIndex].value;
xmlhttp.async = false;
xmlhttp.load(file);
var cities = xmlhttp.selectNodes("Cities/City");
var idx,name;

for(idx = 0; idx < cities.length; idx ++) {
  name = cities[idx].getAttribute("name");
  cityobj.options.length++;
  cityobj.options[cityobj.options.length - 1].value = name;
  cityobj.options[cityobj.options.length - 1].text = name;
}
}
</script>
</body>
</html>

然后建立三个省份的城市数据文件，分别命名为city01.xml,city02.xml,city03.xml

<?xml version="1.0" encoding="GB2312"?>
<Cities Province="江苏">
<City name="南京"/>
</Cities>

<?xml version="1.0" encoding="GB2312"?>
<Cities Province="湖南">
<City name="长沙"/>
</Cities>

<?xml version="1.0" encoding="GB2312"?>
<Cities Province="湖北">
<City name="武汉"/>
</Cities>

保存，在ie6浏览通过，理论上可以在ie5一上浏览器跑。

--  作者：sjk86321824
--  发布时间：6/1/2007 9:47:00 PM

--  
这个是给楼主顶了
--  作者：lovesky20008
--  发布时间：6/1/2007 11:05:00 PM

--  
ding,TankYou
--  作者：hizhfei
--  发布时间：6/18/2007 3:05:00 AM

--  
Thanks!
I got it!
--  作者：冰零
--  发布时间：10/12/2007 6:13:00 PM

--  
感谢ing...
对我们初学者很有帮助...
慢慢消化中.
--  作者：qb10
--  发布时间：10/26/2007 10:43:00 AM

--  
不错！
--  作者：hongjuesir
--  发布时间：10/31/2007 9:19:00 AM

--  
顺便可以结合一个ajax的原理，从服务器端获取xml，就更好了！一般来说，xml是离不开服务器端技术的。
--  作者：kele515
--  发布时间：10/31/2007 1:53:00 PM

--  
太好了，good
--  作者：yy71355480
--  发布时间：11/9/2007 9:43:00 AM

--  
很有用的东西，啃啃
--  作者：HHz
--  发布时间：11/12/2007 2:53:00 PM

--  
先学习中
o(∩_∩)o...
--  作者：bing21
--  发布时间：12/6/2007 6:09:00 PM

--  
学习中....
--  作者：challysue
--  发布时间：1/22/2008 5:30:00 PM

--  
顶lz
--  作者：a-way
--  发布时间：3/1/2008 11:54:00 PM

--  
???????????????????
--  作者：tao1203
--  发布时间：3/13/2008 2:30:00 PM

--  
我也顶一下
--  作者：a132696039
--  发布时间：5/13/2008 11:19:00 PM

--  
我也顶一下
--  作者：yaofenggis
--  发布时间：6/15/2008 9:19:00 AM

--  
ding
--  作者：chen_pei
--  发布时间：11/20/2008 2:07:00 PM

--  
先学习中
o(∩_∩)o...
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 99.121ms