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

加Q726819729

加Q726819729

2016-02-19 17:16

下面图老师小编跟大家分享一个简单易学的XML卷之实战锦囊(4)选单连动教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

  动机: 

  现在我们做个在IE里应用XML的一个小例子:解决双下拉选单的连动问题。大家最常见的可能就是选取省份后改变城市选项的例子了,那我们就来尝试着用XML来完成吧。 

  以前介绍的一些功能我是直接用XML+XSL文件来完成的,大家可能还不是很熟悉它的用法,所以我这次就用HMTL+XML来做,希望能够让大家更清楚的了解--XML原来可以如此简单!:) 

  材料: 

  XML卷之选单连动

  有2个文件:Citys.xml 和 CitySelect.htm 

  作用: 

  选择省份后可以自动显示相对应的城市,这样方便用户,有效的提高数据互动,让自己的页面更加绚丽多彩。 

  代码: 

  Citys.xml 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  

?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+"']/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;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()" /SELECTSELECT name="SelCity" id="SelCity" /SELECT/FORM/BODY

  后记: 

  刚开始学XML的时候,我也有着和大家一样的迷惑  --- XML我是学了,可究竟这XML应该怎么用呢?这个问题阻难了我很久,很久......

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  因为电子商务和软件开发是我的专长,于是我觉得还是从身边最熟悉的开始做起吧。所以我将网站建设中最常用到的一些功能以XML的方式来完成。 你也一样可以的!

展开更多 50%)
分享

猜你喜欢

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

Web开发
XML卷之实战锦囊(4)选单连动

XML卷之实战锦囊(2)动态查询

Web开发
XML卷之实战锦囊(2)动态查询

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

XML卷之实战锦囊(1)动态排序

Web开发
XML卷之实战锦囊(1)动态排序

XML卷之实战锦囊(3)动态分页

Web开发
XML卷之实战锦囊(3)动态分页

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

XML卷之实战锦囊(5)结构树图

Web开发
XML卷之实战锦囊(5)结构树图

XML卷之实战锦囊(5):结构树图

Web开发
XML卷之实战锦囊(5):结构树图

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

一个CD目录的XML文件

一个CD目录的XML文件

怎样添加一个下拉框到msflexgrid

怎样添加一个下拉框到msflexgrid
下拉加载更多内容 ↓