ajax 三级联动
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
var request;
var OptionsName;
iniOptions();
//初始化第一个列表框
function iniOptions() {
OptionsName = "op1";
getNextOptions("", ""); //初始化第一个列表框
}
//创建求XMLHttpRequest对象
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("error , your browerser can can create XMLHttpRequest!");
}
//发送请求，获取下一个列表框的列表数据
//参数oValue为当前列表框的选中值，此值作为下一个列表框的parentID号
function getNextOptions(oValue, rootType) {
createRequest();
var url = "SelectHander.aspx?parentid=" + oValue + "&rootType=" + rootType;
request.open("GET", url, true);
request.onreadystatechange = opcallback;
request.send(null);
}
//回调函数
function opcallback() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText; //获取服务器返回的JSON字串
addOptions(response); //添加option选项
//document.getElementById("demo").innerHTML=response
} else
alert("status is " + request.status);
}
}
//添加option选项
function addOptions(str) {
var jsonObj = str; // JSON字符串转JSON对象
var opObj = document.getElementById(OptionsName);
clearlaterOP();
var s = jsonObj.split("|")
if (s.length > 1) opObj.disabled = false;
for (i = 0; i < s.length; i++) {
jj = s[i];
kk = jj.split(":");
var TemOption = new Option(kk[0], kk[1]); //定义一个选项对象
//if (i==0) TemOption.selected = "selected"; //设定第一项为被选项
opObj[opObj.length] = TemOption; //添加到列表
}
}
//清除所有当前及后继option的列表内容
function clearlaterOP() {
var obj = document.getElementById(OptionsName)
var nOp = Number(obj.id.substr(obj.id.length - 1, 1));
for (i = nOp; i <= 3; i++) {
var opTemp = document.getElementById("op" + i);
opTemp.length = 1;
}
}
//option的onchange事件
function OpSelectChange(obj, rootType) {
obj.value = obj.options[obj.selectedIndex].value;
OptionsName = "op" + (Number(obj.id.substr(obj.id.length - 1, 1)) + 1); //自动确定下一option的id号，为添加选项作准备
getNextOptions(obj.value, rootType);
}
//查找产品
function SearchProductByName() {
var obj = document.getElementById("op3");
var queryValue = obj.options[obj.selectedIndex].value; //产品pageurl
alert(queryValue);
window.location.href = "\""+queryValue+"\"";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="demo">
</div>
<select name="op1" id="op1" onchange="OpSelectChange(this,'A')" style="width:100px;">
<option>Select Catalog</option>
</select>
<select name="op2" id="op2" onchange="OpSelectChange(this,'B')" style="width:100px;" disabled="disabled">
<option>Select Subcatalog</option>
</select>
<select name="op3" id="op3" style="width:100px;" disabled="disabled">
<option>Select Product</option>
</select>
<input id="Button1" type="button" value="button" onclick="SearchProductByName()"/></div>
</form>
</body>
</html>
if (Request.QueryString["parentid"] != null && Request.QueryString["rootType"]!=null)
{
string rootId=Request.QueryString["parentid"].ToString().Trim();
string rootType = Request.QueryString["rootType"].ToString().Trim();
if (rootId == ""&&rootType=="") //when loaded
{
Response.Write("a:1|aa:2|aaa:3");
}
else if (rootId.Trim() != "" && rootType=="A") //when big catalog select
{
Response.Write("b:1|bb:2|bb:3");
}
else if (rootId.Trim() != "" && rootType == "B") ///when sub catalog select
{
Response.Write("c:1|cc:2|cc:3");
}
}
