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

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

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

材料：
XML卷之选单连动
有2个文件：Ci***.xml 和 Ci***elect.htm

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


 
    九江
    南昌
    庐山
    景德镇
 
 
    北京西
    居庸关
    清华园
    周口店
 
 
    福州
    厦门
    漳州
 
 
    兰州
    洛门
    嘉峪关
 
 
    广州
    深圳
    东莞
    石牌
 
 
    合肥
    黄山
    九龙岗
    马鞍山
 

Ci***elect.htm

自定义函数：ChooseState
(读取XML数据中的省的名称，并增加到SelState的下拉列表中)
 
function ChooseState()
{
  var source;
  var sourceName = "Ci***.xml";
  var source = new ActiveXObject('Mi***soft.XMLDOM');   //创建一个 MSXML解析器实例
  so***e.async = false;
  so***e.load(sourceName);   //装入XML文档
  root = so***e.documentElement;   //设置文档元素为根节点元素
  so***ield=root.selectNodes("//@name");   //搜索属性中含有name的所有节点
  for(var i=0;i<so***ield.length;++i)   //增加省份名称到下拉列表
  {
    var oOption = do***ent.createElement('OPTION');
    oO***on.text = " "+sortField[i].text+" ";
    oO***on.value = sortField[i].text;
     fo***.SelState.options.add(oOption);
  }
   ChooseCity();
}

自定义函数：ChooseCity
(根据当前选定的省名来读取XML数据中的对应城市名称，并增加到SelCity 的下拉列表中)
function ChooseCity()
{
  x=***m1.SelState.selectedIndex;   //读取省份下拉框的当前选项
  y=***m1.SelState.options[x].value;
  so***ield=root.selectNodes("//State[@name='"+y+"']/City&q uot;);   //搜索name属性值等于
参数y的State节点下的所有city节点
  for(var i=***m1.SelCity.options.length-1;i>=0;--i)   //撤消原来的列表项
  {
    fo***.SelCity.options.remove(i)
  }
  for(var i=0;i<so***ield.length;++i)   //增加城市名称到下拉列表
  {
    var oOption = do***ent.createElement('OPTION');
    oO***on.text = " "+sortField[i].text+" ";
    oO***on.value = sortField[i].text;
    fo***.SelCity.options.add(oOption);
  }
}
 

表单源码

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

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