`
hereson
  • 浏览: 1451040 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

选单连动

    博客分类：
  • vbs
XMLIEXSL电子商务Microsoft 
阅读更多

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

分享到：
| ASP常用的代码（不断更新）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    flash滚动选单

    【标题】：“Flash滚动选单”是指在网页设计中使用Flash技术实现的一种动态导航菜单，它通常以滚动或滑动的方式展示多个菜单项，为网站增添互动性和视觉吸引力。 【描述】：Flash滚动选单是一种交互式的网页元素，...

    pos课件非选单退货流程

    在本文中，我们将重点探讨“非选单退货流程”，这是一种在特殊情况下使用的退货方式，特别是当顾客无法提供购物小票时。 非选单退货的流程与正常的交易流程基本相似，主要区别在于退货时输入的商品数量为负数。首先...

    D12.威纶通项目选单示例程序.rar

    威纶通项目选单示例程序.rar" 是一个压缩包文件，其中包含了一个关于威纶通触摸屏编程的项目选单示例。威纶通是一家知名的工业自动化设备制造商，其产品包括各种触摸屏HMI（人机界面），广泛应用于PLC控制系统中，为...

    D42.威纶通项目选单应用程序.rar

    威纶通项目选单应用程序.rar"，我们可以推断这是一个与威纶通HMI相关的项目选单应用软件的压缩包。这个压缩包可能包含了用于创建、编辑或管理威纶通HMI项目中的菜单选项的资源和示例。 描述中提到，这个资料提供了...

    Excel二级选单

    在Excel中，二级选单是一种高效的数据输入方法，它允许用户在主菜单中选择一个类别，然后在子菜单中选择具体的选项，这样可以减少输入错误并提高数据录入的效率。这种功能尤其适用于需要从预定义的选项列表中进行...

    基于qml的pathview实现的滑动选单项目源码.zip

    基于qml的pathview实现的滑动选单项目源码.zip基于qml的pathview实现的滑动选单项目源码.zip基于qml的pathview实现的滑动选单项目源码.zip基于qml的pathview实现的滑动选单项目源码.zip基于qml的pathview实现的滑动...

    节目选单，Windows

    这种界面元素被称为“节目选单”或者“菜单”，是Windows程序设计的重要组成部分。本文将深入探讨节目选单的概念、功能以及在Windows编程中的实现。 节目选单通常位于窗口的顶部，包含一组命令选项，如“文件”、...

    D32.威纶通多重语言与项目选单示例程序.rar

    威纶通多重语言与项目选单示例程序.rar”着重探讨了如何在威纶通触摸屏上实现多语言支持和灵活的项目菜单设计。 多语言支持是全球化生产环境中不可或缺的功能，尤其对于跨国企业或出口导向的设备制造商来说，确保...

    用JavaScript写的隐藏式选单

    知识点：使用JavaScript实现隐藏式选单 在网页设计与开发领域，导航菜单是用户界面中的重要组成部分，它不仅提供网站的导航功能，还直接影响用户体验。本文将深入解析一个使用JavaScript编写的隐藏式选菜单，旨在为...

    D13.威纶通历史资料_事件显示_项目选单查询示例程序.rar

    威纶通历史资料_事件显示_项目选单查询示例程序”这个主题，这是一份关于如何在威纶通的人机界面系统中实现历史数据查询、事件显示和项目菜单操作的详细教程。 首先，事件显示是HMI系统中的一个重要功能，它允许...

    兼容性非常好的下拉选单JS+css

    在网页开发中，下拉选单（Dropdown Menu）是一种常见的交互元素，用于提供多级导航或选择选项。本文将深入探讨“兼容性非常好的下拉选单JS+css”这一主题，包括其在不同浏览器中的兼容性，以及如何实现无限下拉选单...

    页面下拉选单动态过滤的js实现

    本话题将深入探讨如何使用JavaScript实现页面下拉选单的动态过滤功能。 首先，我们从“insertRow.html”这个文件名可以推测，它可能是一个HTML页面，其中包含了用于插入行的JavaScript代码，这在动态过滤中是至关...

    N级级联Google式下拉选单

    标题中的“N级级联Google式下拉选单”指的是一个基于jQuery的插件，它模仿了Google搜索框中的级联下拉菜单效果，并且能够扩展到任意多级（N级），提供用户更加灵活和丰富的选择体验。这种设计通常用于在输入框中辅助...

    javascript实现三级联动选单

    ### JavaScript 实现三级联动选单知识点解析 #### 一、知识点概述 在Web开发中，三级联动选单是一种常见的交互式设计模式，主要用于提供多层级数据的选择方式，比如选择省份、城市、区县等场景。这种选单可以极...

    wowpc.iso 开机选单

    wowpc.iso 开机选单 。美化开机选到的东西， 可以USB-CDROM的方式加载这个iso，任何每次开机就变得。 美化了

    CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

    【CSS3制作炫酷下拉菜单与弹起式选单】 在网页设计中，下拉菜单和弹起式选单是常见的交互元素，能够提供丰富的用户体验。CSS3的引入，使得这些菜单的设计变得更加多样化和动态。本文将详细介绍如何利用CSS3实现这两...

    电子功用-自动简化功能选单的移动通讯电子装置及方法

    《电子功用-自动简化功能选单的移动通讯电子装置及方法》 在当前高度发达的移动通讯技术领域，用户界面的简洁性和易用性成为衡量设备用户体验的重要标准。本资料聚焦于一种创新的电子装置与方法，旨在通过自动简化...

    扇形开合选单

    在实现扇形开合选单的过程中，CSS的关键技巧可能包括： 1. **伪类选择器**：使用`:hover`等伪类选择器，当鼠标悬停在菜单项上时触发扇形展开。 2. **旋转与变形**：利用`transform`属性的`rotate()`函数，对菜单项...

    DHTML+JavaScript弹出式日历选单.rar

    标题中的"DHTML+JavaScript弹出式日历选单.rar"是一个使用DHTML（Dynamic HTML）和JavaScript技术实现的交互式日历组件。DHTML是一种在网页上动态展示内容的技术，结合了HTML、CSS和JavaScript，使得网页内容可以不...

Magicbox
Global site tag (gtag.js) - Google Analytics