• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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卷之实战锦囊(3):动态分页
    下一篇:XML卷之实战锦囊(5):结构树图
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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