ajax实现二级联动_读取的是xml文件

发布时间：2020-12-16 01:51:49 所属栏目：百科来源：网络整理

导读：页面比较简单 body div select id="colTag" onchange="selectChange(this.options[this.options.selectedIndex].value)" option id="op" value="0"=====请选择=====/option /select select id="depart" option id="opDep" value="0"=====请选择=====/option

页面比较简单

script代码：

/**
* 项目思路：在页面加载的时候初始化第一个选项，
2：当第一个下拉列表发生改变是触动change函数来改变第二个下拉列表的内容
2.1：读取xml文件的内容
2.2：判断用户选中的option的value值
2.3：遍历xml文件找到与用户对应的值，添加到第二个下拉列表项中

*/
function createXmlHttpRequest(){
var xmlHttp ;
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
throw e;
}
}
}
return xmlHttp;
}
//ajax的回调函数
function callBack(){
if(this.readyState == 4 && this.status == 200){
var xml = this.responseXML;
var xmlArr = xml.getElementsByTagName("college");
for(var i=0;i<xmlArr.length;i++){
var collegeName = xmlArr[i].getElementsByTagName("name")[0].firstChild.nodeValue;
//alert("collegeNamet"+collegeName);
//得到HTML标签
var collegeOpt = document.getElementById("colTag");
//alert(collegeOpt);
//collegeOpt.removeChild("option");
var option = document.createElement("option");
option.text = collegeName;
option.value =collegeName;
collegeOpt.appendChild(option);
}
}
}
window.onload = function(){
//ajax四步
var xmlHttp = createXmlHttpRequest( );
//alert(xmlHttp);
//打开与服务器的连接
xmlHttp.open("GET","college.xml",true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = callBack;
};
function selectChange(value){
//得到页面选择的value值 this.options[this.options.selectedIndex].value
//alert(value);//选择的option的value值
//依然是ajax的四步；
//之后从页面获取值
var xmlHttp = createXmlHttpRequest( );
//alert(xmlHttp);
//打开与服务器的连接
xmlHttp.open("GET",true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function (){
if(this.readyState == 4 && this.status == 200){
var xmlObj = this.responseXML;
//依旧是得到college标签的数组
var collArr = xmlObj.getElementsByTagName("college");
//alert("hahahahahaht"+collArr.length);//2
for(var i=0;i<collArr.length;i++){
//从xml遍历的colleage和页面用户选的值进行比较
//得到responseXML 中college值
var collegeValue = collArr[i].getElementsByTagName("name")[0].firstChild.nodeValue;
//alert(collegeValue);//软件学院，计算机学院
if(collegeValue == value ){
//得到college.xml 中 department的所有标签
var departArr = collArr[i].getElementsByTagName("department");
//alert(departArr.length);//结果为2
for(var j=0;j<departArr.length;j++){
var departName = departArr[j].getElementsByTagName("name")[0].firstChild.nodeValue;
//alert(departName);//打印的时软件工程网络工程或操作系统数据结构
//得到html页面的depart标签
var departSel = document.getElementById("depart");
var option = document.createElement("option");//创建option对象
option.text = departName;
option.value = departName;
departSel.appendChild(option);
}
}

}
}
};

}

</script>

college.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<henu>
<college>
<value>1</value>
<name>软件学院</name>
<department>
<value>1</value>
<name>软件工程</name>
<class>
<value>1</value>
<name>java1班</name>
</class>
<class>
<value>2</value>
<name>java3班</name>
</class>
</department>
<department>
<value>2</value>
<name>网络工程</name>
<class>
<value>1</value>
<name>网络1班</name>
</class>
<class>
<value>2</value>
<name>网络3班</name>
</class>
</department>
</college>
<college>
<value>2</value>
<name>计算机学院</name>
<department>
<value>1</value>
<name>操作系统</name>
<class>
<value>1</value>
<name>操作1班</name>
</class>
<class>
<value>2</value>
<name>操作3班</name>
</class>
</department>
<department>
<value>2</value>
<name>数据结构</name>
<class>
<value>1</value>
<name>数据1班</name>
</class>
<class>
<value>2</value>
<name>数据3班</name>
</class>
</department>
</college>
</henu>

也是第一次写二级联动，还有好多不规范的地方，可能还有更简单的实现方式

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!