XML卷之实战锦囊（4）：选单连动

作者：ITPUB论坛 2008-02-22

内容导航：

CitySelect.htm

自定义函数：ChooseState
(读取XML数据中的省的名称，并增加到SelState的下拉列表中)

function ChooseState()
{
var source;
var sourceName = "Citys.xml";
var source = new ActiveXObject('Microsoft.XMLDOM');   //创建一个 MSXML解析器实例
  source.async = false;
source.load(sourceName);   //装入XML文档
root = source.documentElement;   //设置文档元素为根节点元素
sortField=root.selectNodes("//@name");   //搜索属性中含有name的所有节点
for(var i=0;i<sortField.length;++i)   //增加省份名称到下拉列表
{
var oOption = document.createElement('OPTION');
    oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelState.options.add(oOption);
}
ChooseCity();
}

自定义函数：ChooseCity
(根据当前选定的省名来读取XML数据中的对应城市名称，并增加到SelCity 的下拉列表中)

function ChooseCity()
{
x=form1.SelState.selectedIndex;   //读取省份下拉框的当前选项
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;);   //搜索name属性值

等于
参数y的State节点下的所有city节点

 for(var i=form1.SelCity.options.length-1;i>=0;--i)   //撤消原来的列表项
  {
form1.SelCity.options.remove(i)
}
for(var i=0;i<sortField.length;++i)   //增加城市名称到下拉列表
  {
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelCity.options.add(oOption);
}
}

表单源码

<BODY onLoad="ChooseState()">
<FORM action="" method="post" id="form1" name="form1">
<SELECT name="SelState" id="SelState" onchange="ChooseCity()" >
</SELECT>
<SELECT name="SelCity" id="SelCity" >
</SELECT>
</FORM>
</BODY>

后记：
刚开始学XML的时候，我也有着和大家一样的迷惑 --- “XML我是学了，可究竟这XML应该怎么用呢？”这个问题阻难了我很久，很久......

因为电子商务和软件开发是我的专长，于是我觉得还是从身边最熟悉的开始做起吧。所以我将网站建设中最常用到的一些功能以XML的方式来完成。你也一样可以的！

1 2

【内容导航】

第1页：概述

第2页： 第2页

[责任编辑：nancy]

[an error occurred while processing this directive]