动机: 以前介绍的一些功能我是直接用XML+XSL文件来完成的,大家可能还不是很熟悉它的用法,所以我这次就用HMTL+XML来做,希望能够让大家更清楚的了解–“XML原来可以如此简单!”:) 作用: CitySelect.htm 自定义函数:ChooseState 自定义函数:ChooseCity 表单源码 后记: 因为电子商务和软件开发是我的专长,于是我觉得还是从身边最熟悉的开始做起吧。所以我将网站建设中最常用到的一些功能以XML的方式来完成。 你也一样可以的!
现在我们做个在IE里应用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>
(读取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();
}
(根据当前选定的省名来读取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卷之实战锦囊(4):选单连动_xml教程
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » xml卷之实战锦囊(4):选单连动_xml教程
相关推荐
-      ASP通过XMLDom在服务器端操作XML文件
-      ASP操作xml–显示xml文件中的所有节点
-      WEB页面工具语言XML(五)
-      ajax+xml的asp查询代码
-      XML与HTML文件的区别
-      WEB页面工具语言XML(二)
-      用ASP生成XML数据文档(RSS订阅)
-      WEB页面工具语言XML(四)