XML卷之实战锦囊（4）：选单连动 -pc6资讯

您的位置：首页 → 精文荟萃 → 软件资讯 → XML卷之实战锦囊（4）：选单连动

XML卷之实战锦囊（4）：选单连动 时间：2004/10/8 13:14:00来源：本站整理作者：蓝点我要评论(0)

动机：
现在我们做个在IE里应用XML的一个小例子：解决双下拉选单的连动问题。大家最常见的可能就是选取省份后改变城市选项的例子了，那我们就来尝试着用XML来完成吧。

以前介绍的一些功能我是直接用XML+XSL文件来完成的，大家可能还不是很熟悉它的用法，所以我这次就用HMTL+XML来做，希望能够让大家更清楚的了解--“XML原来可以如此简单！”：）

材料：
XML卷之选单连动
有2个文件：Citys.xml 和 CitySelect.htm

作用：
选择省份后可以自动显示相对应的城市，这样方便用户，有效的提高数据互动，让自己的页面更加绚丽多彩。
效果：
浏览这里
代码：
Citys.xml

   九江
   南昌
   庐山
   景德镇

   北京西
   居庸关
   清华园
   周口店

   福州
   厦门
   漳州

   兰州
   洛门
   嘉峪关

   广州
   深圳
   东莞
   石牌

   合肥
   黄山
   九龙岗
   马鞍山

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);
}
}