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

现在我们做个在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  {
    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  {
    var oOption = document.createElement('OPTION');
    oOption.text = " " sortField[i].text " ";
    oOption.value = sortField[i].text;
    form1.SelCity.options.add(oOption);
  }
}  

表单源码

以下为引用的内容：