這節(jié)主要內(nèi)容是通過AJAX調(diào)用頁面后臺(tái)代碼方法實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)效果，實(shí)現(xiàn)步驟如下：
1.創(chuàng)建文件Recipe24.aspx,實(shí)現(xiàn)后臺(tái)代碼如下 ：
//
引入命名空間
using
System.Web.Services;
//
實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)AJAX請(qǐng)求加載數(shù)據(jù)方法
[WebMethod()]
public
static
ArrayList GetSubList(
string
sBuyID)
{
ArrayList subList =
new
ArrayList();
if
(sBuyID ==
"
1
"
)
{
subList.Add(
new
ListItem(
"
文藝
"
,
"
1
"
));
subList.Add(
new
ListItem(
"
少兒
"
,
"
2
"
));
subList.Add(
new
ListItem(
"
人文社科
"
,
"
3
"
));
subList.Add(
new
ListItem(
"
科技
"
,
"
4
"
));
}
else
if
(sBuyID ==
"
2
"
)
{
subList.Add(
new
ListItem(
"
手機(jī)通訊
"
,
"
1
"
));
subList.Add(
new
ListItem(
"
手機(jī)配件
"
,
"
2
"
));
subList.Add(
new
ListItem(
"
攝影攝像
"
,
"
3
"
));
subList.Add(
new
ListItem(
"
數(shù)碼配件
"
,
"
4
"
));
}
return
subList;
}
2.實(shí)現(xiàn)頁面代碼(HTML部分)如下：
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
align
="center"
>
<
fieldset
style
="width: 400px; height: 150px;"
>
<
table
border
="0"
cellpadding
="10"
cellspacing
="10"
>
<
tr
>
<
td
>
<
asp:DropDownList
ID
="buyList"
runat
="server"
Width
="120px"
>
<
asp:ListItem
Value
="0"
Text
=" --- 請(qǐng)選擇 --- "
></
asp:ListItem
>
<
asp:ListItem
Value
="1"
Text
="圖書"
></
asp:ListItem
>
<
asp:ListItem
Value
="2"
Text
="手機(jī)數(shù)碼"
></
asp:ListItem
>
</
asp:DropDownList
>
</
td
>
<
td
>
<
asp:DropDownList
ID
="subList"
runat
="server"
Width
="120px"
>
<
asp:ListItem
Value
="0"
Text
=" --- 請(qǐng)選擇 --- "
></
asp:ListItem
>
</
asp:DropDownList
>
</
td
>
</
tr
>
</
table
>
</
fieldset
>
</
div
>
</
form
>
</
body
>
3.實(shí)現(xiàn)腳本代碼如下：
<
script
type
="text/javascript"
>
$(
function
() {
$(
"
#buyList
"
).bind(
"
keyup change
"
,
function
(e) {
e.preventDefault();
//
首先初始化
$(
"
#subList
"
).empty().append($(
"
<option></option>
"
).val(
"
0
"
).html(
"
--- 請(qǐng)選擇 ---
"
));
if
($(
this
).val()
!=
"
0
"
) {
sendData($(
this
).val());
}
});
function
sendData(sBuyID) {
var
loc
=
window.location.href;
$.ajax({
type:
"
POST
"
,
url: loc
+
"
/GetSubList
"
,
//
調(diào)動(dòng)后臺(tái)頁面方法
data:
'
{"sBuyID":"
'
+
sBuyID
+
'
"}
'
,
contentType:
"
application/json; charset=utf-8
"
,
dataType:
"
json
"
,
success:
function
(msg) {
//
msg.d是數(shù)組，由后臺(tái)數(shù)組ArrayList返回，因此可以遍歷每個(gè)元素
$.each(msg.d,
function
() {
//
this.Value和this.Text是后臺(tái)返回?cái)?shù)組ArrayList類型包含元素ListItem類型的屬性
$(
"
#subList
"
).append($(
"
<option></option
"
).val(
this
.Value).html(
this
.Text));
});
},
error:
function
() {
alert(
"
ajax請(qǐng)求發(fā)生錯(cuò)誤
"
);
}
});
}
});
</
script
>
4.下拉框二級(jí)聯(lián)動(dòng)效果圖：
5.分析XmlHttpRequest對(duì)象，可看到請(qǐng)求響應(yīng)的數(shù)據(jù)msg.d的結(jié)構(gòu)如下（通過下圖就知道m(xù)sg.d的每個(gè)元素為什么會(huì)有Text和Value屬性了）：
?
今天發(fā)現(xiàn)一個(gè)問題，就是以上代碼如果在VS2005建立的項(xiàng)目里面運(yùn)行，AJAX會(huì)報(bào)JSON對(duì)象錯(cuò)誤，但在VS2010項(xiàng)目里面運(yùn)行正常，一直沒找到原因，哪位高手如果知道其原因，請(qǐng)告知，謝謝。
ASP.NET jQuery 食譜24 (通過AJAX簡(jiǎn)單實(shí)現(xiàn)DropDownList二級(jí)聯(lián)動(dòng))
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
