搜索
首页后端开发XML/RSS教程 XML实战秘籍第四卷:选单连动

XML实战秘籍第四卷:选单连动

Mar 19, 2017 pm 03:45 PM
phpphp教程视频教程

[导读] 现在我们做个在IE里应用xml的一个小例子:解决双下拉选单的连动问题。大家最常见的可能就是选取省份后改变城市选项的例子了,那我们就来尝试着用XML来完成吧。以前介绍的一些功能我是直接用XML+XSL文件来完成的,

现在我们做个在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实战秘籍第四卷:选单连动的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
XML中的RSS:解码标签,属性和结构XML中的RSS:解码标签,属性和结构Apr 24, 2025 am 12:09 AM

RSS是一种基于XML的格式,用于发布和订阅内容。RSS文件的XML结构包括根元素、元素和多个元素,每个代表一个内容条目。通过XML解析器读取和解析RSS文件,用户可以订阅并获取最新内容。

XML在RSS中的优势:技术深度潜水XML在RSS中的优势:技术深度潜水Apr 23, 2025 am 12:02 AM

XML在RSS中具有结构化数据、可扩展性、跨平台兼容性和解析验证的优势。1)结构化数据确保内容的一致性和可靠性;2)可扩展性允许添加自定义标签以适应内容需求;3)跨平台兼容性使其在不同设备上无缝工作;4)解析和验证工具确保Feed的质量和完整性。

XML中的RSS:揭示内容联合的核心XML中的RSS:揭示内容联合的核心Apr 22, 2025 am 12:08 AM

RSS在XML中的实现方式是通过结构化的XML格式来组织内容。1)RSS使用XML作为数据交换格式,包含频道信息和项目列表等元素。2)生成RSS文件需按规范组织内容,发布到服务器供订阅。3)RSS文件可通过阅读器或插件订阅,实现内容自动更新。

超越基础:高级RSS文档功能超越基础:高级RSS文档功能Apr 21, 2025 am 12:03 AM

RSS的高级功能包括内容命名空间、扩展模块和条件订阅。1)内容命名空间扩展RSS功能,2)扩展模块如DublinCore或iTunes添加元数据,3)条件订阅根据特定条件筛选条目。这些功能通过添加XML元素和属性实现,提升信息获取效率。

XML主链:RSS提要如何结构XML主链:RSS提要如何结构Apr 20, 2025 am 12:02 AM

rssfeedsusexmltoStructureContentUpdates.1)xmlProvidesHierarchicalStructurefordata.2)theelementDefinestHefEed'sIdentityAndContainsElements.3)ElementsRementsRementsRepresSentividividividualContentpieces.4)rsssissisexisextensible,允许custemements.5)5)

RSS和XML:了解Web内容的动态二重奏RSS和XML:了解Web内容的动态二重奏Apr 19, 2025 am 12:03 AM

RSS和XML是用于网络内容管理的工具。RSS用于发布和订阅内容,XML用于存储和传输数据。它们的工作原理包括内容发布、订阅和更新推送。使用示例包括RSS发布博客文章和XML存储书籍信息。

RSS文档:Web联合组织的基础RSS文档:Web联合组织的基础Apr 18, 2025 am 12:04 AM

RSS文档是基于XML的结构化文件,用于发布和订阅频繁更新的内容。它的主要作用包括:1)自动化内容更新,2)内容聚合,3)提高浏览效率。通过RSSfeed,用户可以订阅并及时获取来自不同来源的最新信息。

解码RSS:内容提要的XML结构解码RSS:内容提要的XML结构Apr 17, 2025 am 12:09 AM

RSS的XML结构包括:1.XML声明和RSS版本,2.频道(Channel),3.条目(Item)。这些部分构成了RSS文件的基础,允许用户通过解析XML数据来获取和处理内容信息。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用