如今我们做个在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的体式格局来完成。 你也一样能够的!
以上就是 XML实战秘笈第四卷:选单连动的细致内容,更多请关注ki4网别的相干文章!