XML卷之实战锦囊（4）：选单连动【XML教程】,XML,实战锦囊,选单连动

结果：
如今我们做个在IE里运用XML的一个小例子：处理双下拉选单的连动题目。人人最常见的能够就是拔取省份后转变都市选项的例子了，那我们就来尝试着用XML来完成吧。

之前引见的一些功用我是直接用XML+XSL文件来完成的，人人能够还不是很熟习它的用法，所以我此次就用HMTL+XML来做，愿望能够让人人更清晰的相识--“XML本来能够云云简朴！”：）

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

作用：
挑选省份后能够自动显现相对应的都市，如许轻易用户，有用的进步数据互动，让本身的页面越发绚丽多彩。
结果：
阅读这里
代码：

Citys.xml 
<?xml version="1.0" encoding="gb2312"?>
<China>
  <State id="1" name="江西">
    <City>九江</City>
    <City>南昌</City>
    <City>庐山</City>
    <City>景德镇</City>
  </State>
  <State id="2" name="北京">
    <City>北京西</City>
    <City>居庸关</City>
    <City>清华园</City>
    <City>周口店</City>
  </State>
  <State id="3" name="福建">
    <City>福州</City>
    <City>厦门</City>
    <City>漳州</City>
  </State>
  <State id="4" name="甘肃">
    <City>兰州</City>
    <City>洛门</City>
    <City>嘉峪关</City>
  </State>
  <State id="5" name="广东">
    <City>广州</City>
    <City>深圳</City>
    <City>东莞</City>
    <City>石牌</City>
  </State>
  <State id="6" name="安徽">
    <City>合肥</City>
    <City>黄山</City>
    <City>九龙岗</City>
    <City>马鞍山</City>
  </State>
</China>

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的体式格局来完成。你也一样能够的！
以上就是XML卷之实战锦囊（4）：选单连动的内容，更多相关内容请关注ki4网（www.ki4.cn）！