一种基于Javascript的XML设置级联菜单的方法与流程

文档序号:15095589发布日期:2018-08-04 14:29阅读:194来源:国知局

本发明涉及Web开发技术领域,具涉及一种基于Javascript的XML设置级联菜单的方法。



背景技术:

目前,各种Web网页或软件往往通过用户操作界面中一个固定尺寸的菜单界面向用户呈现相关信息。当呈现信息的内容长度超出菜单界面的尺寸时,为了显示出完整的信息内容,现有的各种Web网页或软件通常采用添加滚动条或打开级联式菜单的方式加以解决。所谓级联式选择菜单,即是在用户操作界面中采用多级内容显示的菜单选择模式。



技术实现要素:

本发明解决的技术问题在于提供一种基于Javascript的XML设置级联菜单的方法。,解决了Web前端的级联数据联动显示问题。

本发明解决上述技术问题的技术方案是:

所述的方法是利用Javascrip对xml对象数据进行解析,获取Web前端的第一级菜单,并查找对应的第二级菜单节点;然后创建option节点添加到第二级的select节点中。

所述的方法具体包括以下几个步骤:

步骤1:利用Javascrip对xml对象数据进行解析;

步骤2:利用Javascrip根据用户点击获取Web前端的第一级菜单;

步骤3:根据前端第一级菜单参数去XML文档中查找获取对应的第二级菜单节点;

步骤4:利用第一步获取的第二级菜单节点在Web页面创建option节点;

步骤5:把创建好的option节点添加到第二级的select节点中,从而在Web页面展示第二级菜单节点值。

所述的步骤1中,通过XMLDOM加载解析XML文件。

所述的步骤2中,利用Javascrip根据document.getElementById获取Web前端的第一级菜单节点值。

所述的步骤3中,根据前端第一级菜单节点值去XML文档中根据使用xmlDocument.selectSingleNode与getElementsByTagName(xPath)的方法对节点进行访问,直接通过xPath查找获取相对应的第二级菜单节点。

所述的步骤4中,利用第一步获取的第二级菜单节点参数根据document.createElement("option")在Web页面创建option节点。

所述的步骤5中,把创建好的option节点根据appendChild添加到第二级的select节点中,从而在Web页面展示第二级菜单节点值。

本发明的方法与JavaScript的交互更加方便,更容易解析处理,操作简单;解决了Web前端的级联数据联动显示问题。适用于不同版本的浏览器,尤其适用于JavaSc适用于不同版本的浏览器,

附图说明

下面结合附图对本发明进一步说明:

图1为本发明的方法流程图。

具体实施方式

见图1所示,本发明一种基于Javascript的XML设置级联菜单的方法,具体包含以下几个步骤:

步骤1:利用Javascrip对XML对象数据进行解析,需要加载这个XML文件,Javascrip中通过通过XMLDOM加载解析XML文件;

步骤2:利用Javascrip根据document.getElementById获取Web前端的第一级菜单节点值;

步骤3:根据前端第一级菜单节点值去XML文档中根据使用xmlDocument.selectSingleNode与getElementsByTagName(xPath)的方法对节点进行访问,可以直接通过xPath查找获取相对应的第二级菜单节点;

步骤4:利用第一步获取的第二级菜单节点参数根据document.createElement("option")在Web页面创建option节点;

步骤5:把创建好的option节点根据appendChild添加到第二级的select节点中,从而在Web页面展示第二级菜单节点值。

当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1