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;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的方式来完成。 你也一样可以的！

赞 (0)

相关推荐

  • XML卷之实战锦囊（3）：动态分页

    动机: 为了方便用户查看大批量数据,我们会用到动态分页,因此分页功能是我们在网站上见过的最普遍也是最常用的一个功能模块了.而以往的信息分页都是连接到数据库的,每一次点击都必须要后台数据库的支持.这样不但服务器的负担加重,而且严重的影响用户浏览的速度.试想,如果把分页的功能放到客户端,那会产生什么样的效果呢?呵呵,看看下面的设计吧! . 材料: XML卷之动态分页有2个文件:pages.xml 和 pages.xsl 作用: 把分页的功能放到客户端.在不刷新页面的情况下对数据进行过滤筛选,有效的提

  • XML卷之实战锦囊（2）：动态查询

    动机: 查询功能是我们在网站上见过的最普遍也是最常用的一个功能模块了.以往的信息查询都是连接到数据库的,每一次点击都必须要后台数据库的支持.然而很多情况下用户往往只针对某一部分的数据进行操作,这样不但服务器的负担加重,而且严重的影响用户浏览的速度. 针对这种情况我们需要将用户需要的某一部分数据以XML的方式传递到客户端,用户对这些数据可以很方便的进行操作.既方便了用户,又减轻了服务器数据库的负担.何乐而不为呢!而且这项功能可以通用到其他众多模块,因此添加了这个动态查询功能. 材料: XML卷之动

  • XML卷之实战锦囊（1）：动态排序

    动机: 排序功能让我们页面上的数据显的更人性化,是我们在网站上见过的很普遍的一个功能效果了.以往的自动排序都是用大量的脚本代码来完成的,对一般的爱好者来说这是件困难的事情.然而用XML来处理的话就简单多了.让自己的页面更加绚丽,哈哈,您是不是也心动了呢! 材料: XML卷之动态排序有2个文件:paixu.xml 和 paixu.xsl 作用: 在不刷新页面的情况下更据用户自己的需要对数据重新进行排序显示,有效的提高数据互动功能,让自己的页面更加绚丽多彩.  效果: 浏览这里  代码: paixu

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

    动机: 现在我们做个在IE里应用XML的一个小例子:解决双下拉选单的连动问题.大家最常见的可能就是选取省份后改变城市选项的例子了,那我们就来尝试着用XML来完成吧. 以前介绍的一些功能我是直接用XML+XSL文件来完成的,大家可能还不是很熟悉它的用法,所以我这次就用HMTL+XML来做,希望能够让大家更清楚的了解--"XML原来可以如此简单!":) 材料: XML卷之选单连动有2个文件:Citys.xml 和 CitySelect.htm 作用: 选择省份后可以自动显示相对应的城市,这

  • XML卷之实战锦囊（5）：结构树图

    动机: 最初想起做二叉树是因为需要做一个公司结构图. 以前的做法都是直接用图象软件画出来一个图片.很好看,但每次有变动后都需要重新画一个新的. 另一方面,网页上对线条的显示.布局相当局限.根据动态生成的数据进行排版.定位都相当困难, 而且在美观上也差强人意. 做了各种尝试以后,决定用XML+XSL作数据运算: 用VML来美化线条,用JAVASCRIPT来给对象定位. 材料: XML卷之结构树图有2个文件:flow2.xml 和 flow2.xsl  效果: 浏览这里  讲解: 二叉树思路(1)

  • javascript 调用XML制作连动下拉框

    作者: 何耀Thursday, June 5 2003 2:44 PM 传统的HTML页面中连动下拉框采用了两种方法:1)直接将下拉框中的内容hardcode于html的javascript中,调用javascript函数循环写入下拉框中.这种方法不适用于下拉框内容经常改变的情况.因为数据源和javascript程序写死在同一页面. <html><head><title>List</title><meta http-equiv="Conten

  • Javascript调用XML制作连动下拉列表框

    传统的HTML页面中连动下拉框采用了两种方法:1)直接将下拉框中的内容hardcode于html的javascript中,调用javascript函数循环写入下拉框中.这种方法不适用于下拉框内容经常改变的情况.因为数据源和javascript程序写死在同一页面. <html><head><title>List</title><meta http-equiv="Content-Type" content="text/html

  • Spring实战之使用ClassPathResource加载xml资源示例

    本文实例讲述了Spring使用ClassPathResource加载xml资源.分享给大家供大家参考,具体如下: 一 代码 package lee; import org.springframework.core.io.ClassPathResource; import org.dom4j.*; import org.dom4j.io.*; import java.util.*; import java.util.*; public class ClassPathResourceTest { p

  • Spring实战之使用XML方式管理声明式事务操作示例

    本文实例讲述了Spring实战之使用XML方式管理声明式事务操作.分享给大家供大家参考,具体如下: 一 配置文件 <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.springframework.org/schema/beans"

  • Spring实战之XML与JavaConfig的混合配置详解

    Spring实战之XML与JavaConfig的混合配置详解

    前言 之前提到了关于Spring的显示配置方式有两种,一种是基于XML配置,一种是基于JavaConfig的方式配置.对于这两种配置方式并不是互斥关系,相反,他们两能够相互融合,有效的搭配完成Spring的bean注入. 这里分别介绍如何在JavaConfig中引用XML配置的bean以及如何在XML配置中引用JavaConfig.下面话不多说,来一起看看详细的介绍吧. 一.JavaConfig中引用XML配置的bean 上篇我们看到配置类CDPlayerConfig具体代码如下 @Config

随机推荐