//初始化第一個列表框
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(str);// JSON字串轉JSON對象
var opObj = document.getElementById(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.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 = 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);
}
</script>OptionServer.asp: <%@LANGUAGE="VBSCRIPT" 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檔案頭部並沒有加<%@LANGUAGE="VBSCRIPT" 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對象。加入<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>和Response.ContentType = "text/HTML"，並將OptionServer.asp和index.html設定為utf-8代碼格式，才能正常傳值。對此百思不得其解，還請高人指點。
