ajax技术初探实现连动菜单

最新推荐文章于 2019-08-04 05:01:59 发布

sanshisong

最新推荐文章于 2019-08-04 05:01:59 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： ajax class javascript function encoding xml

本文链接：https://blog.csdn.net/sanshisong/article/details/572971

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我是懒人，不想太动脑子，凡事挑简单的方法，javascript 写二级连动太长不说，记还不好记，数据和代码没有分离太多了，最近看到AJAX实现二级菜单，感觉不错，下面是从一位兄弟BLOG上看到的，他的代码有点冗余，我优化了下，并加上注释

test.xml如下

----

<?xml version="1.0" encoding="GB2312"?>
<item>
<class display="请选择省份">
<subclass display="">Not Available</subclass>
</class>
<class display="北京">
<subclass display="北京">city</subclass>
</class>
<class display="天津">
<subclass display="天津">city</subclass>
</class>
<class display="上海">
<subclass display="上海">city</subclass>
</class>
<class display="重庆">
<subclass display="重庆">city</subclass>
</class>
<class display="河北">
<subclass display="石家庄">city</subclass>
</class>
<class display="黑龙江">
<subclass display="哈尔滨">city</subclass>
<subclass display="齐齐哈尔">city</subclass>
</class>
<class display="吉林">
<subclass display="长春">city</subclass>
</class>
<class display="辽宁">
<subclass display="沈阳">city</subclass>
</class>
<class display="内蒙古">
<subclass display="呼和浩特">city</subclass>
</class>
<class display="山西">
<subclass display="太原">city</subclass>
</class>
<class display="陕西">
<subclass display="西安">city</subclass>
</class>
<class display="宁夏">
<subclass display="银川">city</subclass>
</class>
<class display="甘肃">
<subclass display="兰州">city</subclass>
</class>
<class display="新疆">
<subclass display="乌鲁木齐">city</subclass>
</class>
<class display="青海">
<subclass display="西宁">city</subclass>
</class>
<class display="西藏">
<subclass display="拉萨">city</subclass>
</class>
<class display="四川">
<subclass display="成都">city</subclass>
</class>
<class display="云南">
<subclass display="昆明">city</subclass>
</class>
<class display="贵州">
<subclass display="贵阳">city</subclass>
</class>
<class display="河南">
<subclass display="郑州">city</subclass>
</class>
<class display="山东">
<subclass display="济南">city</subclass>
</class>
<class display="安徽">
<subclass display="合肥">city</subclass>
</class>
<class display="湖北">
<subclass display="武汉">city</subclass>
</class>
<class display="湖南">
<subclass display="长沙">city</subclass>
</class>
<class display="江苏">
<subclass display="南京">city</subclass>
</class>
<class display="浙江">
<subclass display="杭州">city</subclass>
</class>
<class display="江西">
<subclass display="南昌">city</subclass>
</class>
<class display="福建">
<subclass display="福州">city</subclass>
</class>
<class display="广东">
<subclass display="广州">city</subclass>
</class>
<class display="广西">
<subclass display="南宁">city</subclass>
</class>
<class display="海南">
<subclass display="海口">city</subclass>
</class>
<class display="台湾">
<subclass display="台北">city</subclass>
</class>
<class display="香港">
<subclass display="香港">city</subclass>
</class>
<class display="澳门">
<subclass display="澳门">city</subclass>
</class>
</item>

-------------

test.htm

<html>
<head>
<script language="JavaScript" for="window" event="onload">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
//创建 XML文档对象
var i=0;
var j=0;

loadXML();
function loadXML()
{
xmlDoc.async="false";
//非异步
xmlDoc.load("test.xml");
//载入xml
xmlObj=xmlDoc.documentElement;
nodes = xmlObj.childNodes;
//一级孩子节点
document.frm.mainclass.options.length = 0;
document.frm.subclass.options.length = 0;

for (i=0;i<nodes.length;i++)
{
labels=xmlObj.childNodes(i).getAttribute("display");
//靠属性取得值
values=xmlObj.childNodes(i).text;
document.frm.mainclass.add(document.createElement("OPTION"));
//增加option 标签
document.frm.mainclass.options[i].text=labels;
document.frm.mainclass.options[i].value=values;

}

</script>

function setsubclass(main)
{
var is_selected="N";

if (document.frm.subclass.options.length!=0)
{
for (i=0;i<=document.frm.subclass.options.length;i++)
{
document.frm.subclass.options[i]=null ;
document.frm.subclass.options.remove(i);
//移除
}
}

for (i=0;i<xmlObj.childNodes.length;i++)
{

var values="";
var lables="";

if (is_selected=="Y") return;
labels=xmlObj.childNodes(i).getAttribute("display");
values=xmlObj.childNodes(i).text;
if (labels==main)
{

is_selected="Y";

for (j=0;j<xmlObj.childNodes(i).childNodes.length;j++)
{
labels=xmlObj.childNodes(i).childNodes(j).getAttribute("display");
//取二级孩子节点属性
values=xmlObj.childNodes(i).childNodes(j).text;
document.frm.subclass.add(document.createElement("OPTION"));
document.frm.subclass.options[j].text=labels;
document.frm.subclass.options[j].value=values;

}

}
}
</script>

<title>在HTML中调用XML数据</title>
</head>
<body bgcolor="#FFFFFF">
<FORM NAME="frm">
类型<SELECT NAME="mainclass" OnChange='setsubclass(this[selectedIndex].text)'></SELECT>
<option selected value="" ></option>
子类<SELECT NAME="subclass"></SELECT>
</form>
</body>
</html>

这个是test

sanshisong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax技术初探实现连动菜单

我是懒人，不想太动脑子，凡事挑简单的方法，javascript 写二级连动太长不说，记还不好记，数据和代码没有分离太多了，最近看到AJAX实现二级菜单，感觉不错，下面是从一位兄弟BLOG上看到的，他的代码有点冗余，我优化了下，并加上注释test.xml如下----Not Availablecitycitycitycitycitycitycitycitycitycitycitycitycitycit
复制链接

扫一扫

专栏目录