XML卷之实战锦囊（4）：选单连动

时间:2016-02-24 13:51 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【XML卷之实战锦囊（4）：选单连动】，下面是详细的分享！

XML卷之实战锦囊（4）：选单连动

现在我们做个在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的所有节点
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);
}
}

表单源码

以下为引用的内容：

以上所分享的是关于XML卷之实战锦囊（4）：选单连动，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：富甲天下4中为什么使用绿色锦囊的时候，在提示“请...

　　答：锦囊使用是有智力限制的，不同锦囊的智力限制不同，所以刘备军游戏刚开始张飞不可能使用任何锦囊，因为他智力太低了。 >>详细

　　相关问题：

　　答： >>详细

　　相关问题：

　　答： >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

XML卷之实战锦囊（4）：选单连动

XML卷之实战锦囊（4）：选单连动

以上所分享的是关于XML卷之实战锦囊（4）：选单连动，下面是编辑为你推荐的有价值的用户互动：

最新教程

相关教程