今天下午弄ajax的二级联动菜单，搞得人纠结死了。火狐很好，但IE就是出问题。没有办法只有百度了。但找来的都是在IE下实现的，火狐却不行。于是自己总结了下，贴出以下代码。
以下为HTML代码，要实现效果为点击第一个下拉菜单form1，第二个菜单form2的内容随之改变。form.html:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>AJax 二级菜单</title>
<script type=”text/javascript” src=”form.js”></script>
</head>
<body>
<select name=”form1″ onchange=”process()” id=”form1″>
<option value=”1″>文理学部</option>
<option value=”2″>信息学部</option>
<option value=”3″>工学部</option>
<option value=”4″>医学部</option>
</select>
<select id=”form2″>
<option value=”1″>11</option>
<option value=”2″>12</option>
<option value=”3″>13</option>
<option value=”4″>14</option>
</select>
</body>
</html>
接下来为 form.js代码：
// JavaScript Document
var xmlHttp = CreateHttpObject();
//生成xmlHttp对象
function CreateHttpObject() {
var xmlHttp;
if (window.ActiveXObject) {
var XmlHttpVersions = new Array(“MSXML2.XMLHTTP.6.0″, “MSXML2.XMLHTTP.5.0″, “MSXML2.XMLHTTP.4.0″, “MSXML2.XMLHTTP.3.0″, “MSXML2.XMLHTTP”, “Microsoft.XMLHTTP”);
for (var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++) {
try {
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
} catch(e) {
xmlHttp = false;
}
}
} else {
try {
xmlHttp = new XMLHttpRequest();
} catch(e) {
xmlHttp = false;
}
}
if (!xmlHttp) {
alert(“Error creating the XMLHttpRequest object.”);
} else return xmlHttp;
}
//定义选择第一个菜单时执行的函数，process()
function process() {
if (xmlHttp) {
try {
var value = document.getElementById(“form1″).value;
//将第一个下拉菜单的值作为参数传给form.php
xmlHttp.open(“GET”, “form.php?value=” + value);
//状态OK 则执行 ReadyChange 函数
xmlHttp.onreadystatechange = ReadyChange;
xmlHttp.send(null);
} catch(e) {
alert(“Can’t connect to server;\n” + e.toString());
}
}
}
function ReadyChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
try {
handleServerResponse();
} catch(e) {
alert(“Error reading the response:” + e.toString());
}
} else {
alert(“There was a problem accessing the server;” + xmlHttp.statusText);
}
}
}
function handleServerResponse() {
//接受PHP生成的xml文件
var xmlResponse = xmlHttp.responseXML;
//以下判断 xml文档结构是否合格
if (!xmlResponse || !xmlResponse.documentElement) throw (“InVALID xml structure:\n” + xmlHttp.responseText);
var ResponseRoot = xmlResponse.documentElement.nodeName;
if (ResponseRoot == “parsererror”) throw (“InVALID xml structure:\n” + xmlHttp.responseText);
//xml根元素
var xmlRoot = xmlResponse.documentElement;
//接收xml文件中 oValue,oText 元素的值
var OptionValue = xmlRoot.getElementsByTagName(“oValue”);
var OptionText = xmlRoot.getElementsByTagName(“oText”);
var Form2 = document.getElementById(“form2″)
var i = 0;
if (window.ActiveXObject) { //若为IE，执行以下循环
Form2.options.length = 0;
for (; i < OptionValue.length; i++) {
var option = new Option(OptionValue[i].firstChild.data, OptionText[i].firstChild.data);
try {
Form2.add(option);
} catch(e) {}
}
} else { //若不为IE，执行以下循环
var htmlw = “”;
for (; i < OptionValue.length; i++) {
htmlw += “<option value=” + OptionValue[i].firstChild.data + “>” + OptionText[i].firstChild.data + “</option>”;
if (i == (OptionValue.length – 1)) Form2.innerHTML = htmlw;
}
}
}
以下为 form.php代码：
<?php
header( ‘Content-Type:text/xml’);
$value=$ _GET[ 'value'];
$dom=new DOMDocument();
$option2=$ dom->createElement(‘option2′);
$dom->appendChild($option2);
$i= $value*10+1;
for($i; $i<$value*10+5 ; $i++) {
$option1=$ dom->createElement(‘option1′);
$oValue = $dom->createElement(‘oValue’);
$oText= $dom->createElement(‘oText’);
$titleText1 = $dom->CreateTextNode($i);
$titleText2 = $dom->CreateTextNode($i);
$oValue->appendChild($titleText1);
$oText ->appendChild($titleText2);
$option1->appendChild($oValue);
$option1->appendChild($oText);
$option2->appendChild($option1);
}
$xmlString = $dom->saveXML();
echo $xmlString;
?>
以下为图片效果示例：
IE二级菜单联动效果
IE二级菜单联动效果
火狐二级联动菜单效果
火狐二级菜单联动效果
