首页 后端开发 XML/RSS教程 XML卷之实战锦囊(4):选单连动

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

Feb 10, 2017 pm 04:18 PM
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(&#39;Microsoft.XMLDOM&#39;);   //创建一个 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(&#39;OPTION&#39;);
    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=&#39;"+y+"&#39;]/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(&#39;OPTION&#39;);
    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):选单连动的内容,更多相关内容请关注PHP中文网(www.php.cn)!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

能否用PowerPoint打开XML文件 能否用PowerPoint打开XML文件 Feb 19, 2024 pm 09:06 PM

XML文件可以用PPT打开吗?XML,即可扩展标记语言(ExtensibleMarkupLanguage),是一种被广泛应用于数据交换和数据存储的通用标记语言。与HTML相比,XML更加灵活,能够定义自己的标签和数据结构,使得数据的存储和交换更加方便和统一。而PPT,即PowerPoint,是微软公司开发的一种用于创建演示文稿的软件。它提供了图文并茂的方

使用Python实现XML数据的合并和去重 使用Python实现XML数据的合并和去重 Aug 07, 2023 am 11:33 AM

使用Python实现XML数据的合并和去重XML(eXtensibleMarkupLanguage)是一种用于存储和传输数据的标记语言。在处理XML数据时,有时候我们需要将多个XML文件合并成一个,或者去除重复的数据。本文将介绍如何使用Python实现XML数据的合并和去重的方法,并给出相应的代码示例。一、XML数据合并当我们有多个XML文件,需要将其合

Python中的XML数据转换为CSV格式 Python中的XML数据转换为CSV格式 Aug 11, 2023 pm 07:41 PM

Python中的XML数据转换为CSV格式XML(ExtensibleMarkupLanguage)是一种可扩展标记语言,常用于数据的存储和传输。而CSV(CommaSeparatedValues)则是一种以逗号分隔的文本文件格式,常用于数据的导入和导出。在处理数据时,有时需要将XML数据转换为CSV格式以便于分析和处理。Python作为一种功能强大

使用Python实现XML数据的筛选和排序 使用Python实现XML数据的筛选和排序 Aug 07, 2023 pm 04:17 PM

使用Python实现XML数据的筛选和排序引言:XML是一种常用的数据交换格式,它以标签和属性的形式存储数据。在处理XML数据时,我们经常需要对数据进行筛选和排序。Python提供了许多有用的工具和库来处理XML数据,本文将介绍如何使用Python实现XML数据的筛选和排序。读取XML文件在开始之前,我们需要先读取XML文件。Python有许多XML处理库,

使用PHP将XML数据导入数据库 使用PHP将XML数据导入数据库 Aug 07, 2023 am 09:58 AM

使用PHP将XML数据导入数据库引言:在开发中,我们经常需要将外部数据导入到数据库中进行进一步的处理和分析。而XML作为一种常用的数据交换格式,也经常被用来存储和传输结构化数据。本文将介绍如何使用PHP将XML数据导入数据库。步骤一:解析XML文件首先,我们需要解析XML文件,提取出需要的数据。PHP提供了几种解析XML的方式,其中最常用的是使用Simple

Python实现XML和JSON之间的转换 Python实现XML和JSON之间的转换 Aug 07, 2023 pm 07:10 PM

Python实现XML和JSON之间的转换导语:在日常的开发过程中,我们常常需要将数据在不同的格式之间进行转换。XML和JSON是常见的数据交换格式,在Python中,我们可以使用各种库来实现XML和JSON之间的相互转换。本文将介绍几种常用的方法,并附带代码示例。一、XML转JSON在Python中,我们可以使用xml.etree.ElementTree模

使用Python处理XML中的错误和异常 使用Python处理XML中的错误和异常 Aug 08, 2023 pm 12:25 PM

使用Python处理XML中的错误和异常XML是一种常用的数据格式,用于存储和表示结构化的数据。当我们使用Python处理XML时,有时可能会遇到一些错误和异常。在本篇文章中,我将介绍如何使用Python来处理XML中的错误和异常,并提供一些示例代码供参考。使用try-except语句捕获XML解析错误当我们使用Python解析XML时,有时候可能会遇到一些

Python解析XML中的特殊字符和转义序列 Python解析XML中的特殊字符和转义序列 Aug 08, 2023 pm 12:46 PM

Python解析XML中的特殊字符和转义序列XML(eXtensibleMarkupLanguage)是一种常用的数据交换格式,用于在不同系统之间传输和存储数据。在处理XML文件时,经常会遇到包含特殊字符和转义序列的情况,这可能会导致解析错误或者误解数据。因此,在使用Python解析XML文件时,我们需要了解如何处理这些特殊字符和转义序列。一、特殊字符和

See all articles