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

来源:互联网 时间:1970-01-01

现在我们做个在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的方式来完成。 你也一样可以的!



相关阅读:
Top