ajax解決的下拉框的onchange問題

即在觸發地區下拉框的onchange事件時,代理商的下拉框選項也相應的改變,比如選擇地區 湖南—〉長沙,那麼代理商下拉框只顯示長沙的代理商。

ajax解決的下拉框的onchange問題

本來認為這個很好實現,但實際改起來的時候發現問題多多,主要問題是原有的地區聯動是用js實現的,它的資料來源是一個xml檔案,當然如果下拉框是服務器端控制元件那麼問題是很好解決的,現在是html控制元件一下子似乎還真有些不好改,想了幾種辦法實現起來都不理想,最後將思路轉向用ajax來實現問題才迎刃而解,現在仔細一想,像這種情況似乎只有用ajax才能比較好的.解決,如果是在地區下拉框的onchange事件裡向後臺進行一次提交,將地區下拉框的id傳過去的話,實際上產生的回發會將地區聯動下拉框重新初始化。

現在我具體談談這個ajax實現的過程。

首先頁面當然需要定義一個下拉框的html控制元件。

複製程式碼 程式碼如下:

接下來當然是定義XmlHttpRequest物件。

複製程式碼 程式碼如下:

var xmlhttp;

function CreateXmlHttp()

{

//非IE瀏覽器建立XmlHttpRequest物件

if(ttpRequest)

{

xmlhttp=new XmlHttpRequest();

}

//IE瀏覽器建立XmlHttpRequest物件

if(veXObject)

{

try

{

xmlhttp=new ActiveXObject("TTP");

}

catch(e)

{

try{

xmlhttp=new ActiveXObject("TTP");

}

catch(ex){}

}

}

}

這個在我的多篇blog文章裡都有闡述,就不多說了。

接下來當然是利用該物件來發送條件,獲得資料,並且將獲得的資料繫結到agent這個下拉框。

在地區下拉框的onchange事件裡面觸發函式AjaxSend();

複製程式碼 程式碼如下:

function AjaxSend()

{

//建立XmlHttpRequest物件

CreateXmlHttp();

if(!xmlhttp)

{

alert("建立xmlhttpRequest發生異常!");

return false;

}

//獲取地區下拉框的value值,作為條件傳送

var ss=lementById("a2")tring(0,4);

}

//要傳送的url,UserAjax我專門用來取資料

url="

("POST",url,false);

adystatechange=function()

{

if(yState==4)

{

if(us==200)

{

//清空原下拉框

lementById("agent")th=0;

//str為返回的一個字串,形式為"0001/代理商1,0002/代理商2,0003/代理商3"

var str=onseText;

//將該字串分割為陣列形式

var strs=t(",");

lementById("agent")(new Option("----------","000000"));

for(var i=0;i<th-1;i++)

{

//獲取value值(編號)

var a=strs[i]tring(0,strs[i]IndexOf("/"));

//獲取繫結內容

var b=strs[i]tring(strs[i]IndexOf("/")+1,th);

//繫結到下拉框

lementById("agent")(new Option(b,a));

}

}

}

}

();

}

另外順便介紹一下UserAjax接收到該地區編號後獲取資料返回字串的過程。

複製程式碼 程式碼如下:

string Area = yString["area"]ring();

DataTable data = "生成DataTable,涉及到公司核心程式碼,省略"

string aa = "";

for (int i = 0; i < t; i++)

{

if (aa == "")

{

aa = [i]["id"]ring()+"/"+[i]["name"]ring();

}

else

{

aa = aa + "," + [i]["id"]ring() +"/"+ [i]["name"]ring();

}

}

e(aa);

這樣,一個比較棘手的問題用ajax就獲得了完美解決,並且不會因向後臺回發而導致下拉框初始化,導致選項改變,親愛的朋友,看了這個例子,你對ajax是不是也有了

更好的認識呢?