Code<!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>多级联动菜单</title>
<script type="text/javascript">
var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
var targetSelId; //用于保存要更新选项的列表id
var selArray; //用于保存级联菜单id的数组
//用于创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
}
}
//获取列表选项的调用函数
function buildSelect(selectedId, targetId) {
if (selectedId == "") { //selectedId为空串表示选中了默认项
clearSubSel(targetId); //清除目标列表及下级列表中的选项
return; //直接结束函数调用，不必向服务器请求信息
}
targetSelId = targetId; //将传入的目标列表id赋值给targetSelId变量
createXmlHttp(); //创建XmlHttpRequest对象
xmlHttp.onreadystatechange = buildSelectCallBack; //设置回调函数
xmlHttp.open("GET", "ajax.ashx?selectedId=" + selectedId, true);
xmlHttp.send(null);
}
//获取列表选项的回调函数
function buildSelectCallBack() {
if (xmlHttp.readyState == 4) {
var optionsInfo = eval("("+xmlHttp.responseText+")"); //将从服务器获得的文本转为对象直接量
var targetSelNode = document.getElementById(targetSelId);
clearSubSel(targetSelId); //清除目标列表中的选项
//遍历对象直接量中的成员
for (var o in optionsInfo) {
targetSelNode.appendChild(createOption(o, optionsInfo[o])); //在目标列表追加新的选项
}
}
}
//根据传入的value和text创建选项
function createOption(value, text) {
var opt = document.createElement("option"); //创建一个option节点
opt.setAttribute("value", value); //设置value
opt.appendChild(document.createTextNode(text)); //给节点加入文本信息
return opt;
}
//清除传入的列表节点内所有选项
function clearOptions(selNode) {
selNode.length = 1; //设置列表长度为1，仅保留默认选项
selNode.options[0].selected = true; //选中默认选项
}
//初始化列表数组（按等级）
function initSelArray() {
selArray = arguments; //arguments对象包含了传入的所有参数
}
//清除下级子列表选项
function clearSubSel(targetId) {
var canClear = false; //设置清除开关，初始值为假
for (var i=0; i<selArray.length; i++) { //遍历列表数组
if (selArray[i]==targetId) { //当遍历至目标列表时，打开清除开关
canClear = true;
}
if (canClear) { //从目标列表开始到最下级列表结束，开关始终保持打开
clearOptions(document.getElementById(selArray[i])); //清除该级列表选项
}
}
}
</script>
</head>
<body>
<h1>
多级联动菜单</h1>
<table>
<tr>
<td>
列表A</td>
<td>
<select name="selA" id="selA" onchange="buildSelect(this.value, 'selB')">
<option value="" selected="selected">------请选择------</option>
</select>
</td>
</tr>
<tr>
<td>
列表B</td>
<td>
<select name="selB" id="selB" onchange="buildSelect(this.value, 'selC')">
<option value="" selected="selected">------请选择------</option>
</select>
</td>
</tr>
<tr>
<td>
列表C</td>
<td>
<select name="selC" id="selC">
<option value="" selected="selected">------请选择------</option>
</select>
</td>
</tr>
</table>
<script type="text/javascript">
initSelArray('selA','selB','selC');
buildSelect('INIT', 'selA');
</script>
</body>
</html>
Code<%@ WebHandler Language="C#" Class="ajax" %>
using System;
using System.Web;
public class ajax : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string database = "{'0':'dianqi0'";
for (int i = 1; i < 5; i++)
{
database = database + ",'" + i + "':'" + "电器" + i + "'";
}
database = database + "}";
// Response.Write(database);
context.Response.Write(database);
}
public bool IsReusable
{
get
{
return false;
}
}
}
