欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

XML卷之实战锦囊(4):选单连动

程序员文章站 2022-03-22 08:16:23
动机: 现在我们做个在ie里应用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的方式来完成。 你也一样可以的!