区域多级联动ajax,[转载]用Ajax实现多级联动下拉列表（无限级别，JSON传输数据，含全国地区数据...

网页制作过程中，我们经常会用到多级联动下拉列表，下面以全国地区多级下拉列表为例，说明用Ajax方式，从全国地区数据库异步读取数据，以JSON传输数据的实现方法。

全国地区多级下拉列表，至少需要省、市、县三级，他们之间需要联动，下图是最终效果：

代码包含两个文件和一个数据库：index.html，下拉列表显示页面；optionServer.asp，为index.html异步提供数据。

数据库结构：

id:自动增加，数值型

text:地区名，字符型

code:地区代码，字符型

ParentCode:上级地区代码，顶级时为空，字符型

代码如下：

index.html:

/p>

1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

全国行政地区级联下拉列表框

省/直辖市：

οnchange="OpSelectChange(this)"

style="width:100px;">

市：

οnchange="OpSelectChange(this)"

style="width:100px;">

县/区：

οnchange="this.value=this.options[this.selectedIndex].value;"

style="width:100px;">

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("错误，无法请求XMLHttpRequest!");

}

//发送请求，获取下一个列表框的列表数据

//参数oValue为当前列表框的选中值，此值作为下一个列表框的parentID号

function getNextOptions(oValue) {

createRequest();

var url = "OptionServer.asp?parentid=" + oValue;

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选项

} else

alert("status is " + request.status);

}

}

//添加option选项

function addOptions(str) {

var jsonObj = eval_r(str);// JSON字符串转JSON对象

var opObj = document.getElementByIdx_x(OptionsName);

clearlaterOP();

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

var TemOption = new Option(jsonObj[i].title, jsonObj[i].value);

//定义一个选项对象

if (i==0) TemOption.selected = "selected"; //设定第一项为被选项

opObj[opObj.length] = TemOption; //添加到列表

}

}

//清除所有当前及后继option的列表内容

function clearlaterOP() {

var obj = document.getElementByIdx_x(OptionsName)

var nOp = Number(obj.id.substr(obj.id.length - 1, 1));

for (i = nOp; i <= 3; i++) {

var opTemp = document.getElementByIdx_x("op" + i);

opTemp.length = 0;

}

}

//option的onchange事件

function OpSelectChange(obj) {

obj.value = obj.options[obj.selectedIndex].value;

OptionsName = "op" + (Number(obj.id.substr(obj.id.length - 1, 1)) +

1); //自动确定下一option的id号，为添加选项作准备

getNextOptions(obj.value);

}

OptionServer.asp:

CODEPAGE="65001"%>

response.Charset="utf-8"

Response.ContentType = "text/HTML"

ParentID=Trim(Request("parentid"))

Set Conn=Server.CreateObject("ADODB.Connection")

Connstr="DBQ="+server.mappath("area.mdb")+";DefaultDir=;DRIVER={Microsoft

Access Driver (*.mdb)};"

Conn.Open Connstr

Set Rs=Server.CreateObject("ADODB.Recordset")

if ParentID="" then

sql="select text,code from area where Parentcode is null"

else

sql="select text,code from area where

Parentcode='"&ParentID&"'"

end if

rs.open sql,conn,1,1

str="["

do while not rs.eof

str=str & "{'title':'" & rs("text")

& "','value':'" & rs("code")

& "'},"

rs.moveNext

loop

str=left(str,len(str)-1)+"]"

Response.Write(str)

Rs.Close

Set Rs=Nothing

Conn.Close

Set Conn = Nothing

%>

实现过程：1、当某个下拉列表更改选定时，会触发onchange事件，代码中用function

OpSelectChange(obj)来处理该事件，主要做两件事，一是根据当前下拉列表的ID号，确定下级下拉列表的id号，并填入变量OptionsName；二是调用getNextOptions(obj.value)向服务器发送请求。

2、function

getNextOptions(obj.value)将当前下拉列表的选中值作为参数发送给optionServer.asp，其中定义了回调函数：function

opcallback()。

3、服务器接收getNextOptions(obj.value)的传值，并以此值作为Parentcode，查询该值下的所有记录，并将记录组合成JSON格式的字符串。字串格式类似“[{'title':'北京市','value':'100001'},{'title':'天津市','value':'200001'}]”。服务器处理完数据后，回调客户端opcallback()。

4、function

opcallback()用request.responseText获取服务器传来的JSON字符串，将其它转换成JSON对象后，添加下级下拉列表项目。

困惑：在代码调试过程中，曾遇到一些头疼的事情，主要是用JSON传中文字符的问题，开始调试时在OptionServer.asp文件头部并没有加

CODEPAGE="65001"%>和Response.ContentType =

"text/HTML"这两句。测试过程中，以Response.Write("[{'title':'北京','value':'100001'},{'title':'天津','value':'200001'}]")作为返回数据，在客户端能得到正确的数据，但用Response.Write("[{'title':'北京市','value':'100001'},{'title':'天津市','value':'200001'}]")作为测试数据时，(三个汉字)，在客户端显示的数据是“[{'title':'北京,'value':'100001'},{'title':'天津,'value':'200001'}]")”，“市”没有了，而且少了个“，”，导致无法转换成JSON对象。加入

CODEPAGE="65001"%>和Response.ContentType =

"text/HTML"，并将OptionServer.asp和index.html设置为utf-8代码格式，才能正常传值。对此百思不得其解，还请高人指点。