主页 > 知识库 > XML卷之实战锦囊(4):选单连动

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

热门标签:服务器配置 检查注册表项 铁路电话系统 智能手机 银行业务 美图手机 网站文章发布 呼叫中心市场需求

动机:
现在我们做个在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;isortField.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+"']/Cityq 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;isortField.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):选单连动》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266