View Code
<
form
id
="form1"
runat
="server"
>
<
div
align
="left"
>
<
fieldset
style
="width: 350px; height: 150px"
>
<
p
>
選擇顏色
</
p
>
<
table
cellpadding
="0"
cellspacing
="0"
border
="0"
>
<
tr
>
<
td
>
</
td
>
<
td
>
<
asp:DropDownList
ID
="ddlFirst"
runat
="server"
>
<
asp:ListItem
Value
=""
Text
="--- 請選擇 ---"
></
asp:ListItem
>
<
asp:ListItem
Value
="1"
Text
="紅色"
></
asp:ListItem
>
<
asp:ListItem
Value
="2"
Text
="黃色"
></
asp:ListItem
>
<
asp:ListItem
Value
="3"
Text
="藍色"
></
asp:ListItem
>
</
asp:DropDownList
>
</
td
>
</
tr
>
<
tr
>
<
td
colspan
="2"
>
</
td
>
</
tr
>
<
tr
>
<
td
>
</
td
>
<
td
>
<
asp:DropDownList
ID
="ddlSecond"
runat
="server"
>
<
asp:ListItem
Value
=""
Text
="--- 請選擇 ---"
></
asp:ListItem
>
</
asp:DropDownList
>
</
td
>
</
tr
>
</
table
>
</
fieldset
>
</
div
>
</
form
>
<
head
runat
="server"
>
<
title
>
Recipe8
</
title
>
<
script
src
="Scripts/jquery-1.4.1-vsdoc.js"
type
="text/javascript"
></
script
>
<
script
type
="text/javascript"
>
$(document).ready(
function
() {
$(
"
#ddlFirst
"
).bind(
"
change
"
,
function
() {
//
添加change事件
$(
"
#ddlSecond option
"
).remove();
//
先刪除所有項，以便重新加載
$(
"
#ddlSecond
"
).append(
"
<option value=''>--- 請選擇 ---</option>
"
);
if
($(
this
).val()
==
1
) {
$(
"
#ddlSecond
"
).append(
"
<option value='11'>紅色1</option>
"
);
$(
"
#ddlSecond
"
).append(
"
<option value='12'>紅色2</option>
"
);
$(
"
#ddlSecond
"
).append(
"
<option value='13'>紅色3</option>
"
);
}
else
if
($(
this
).val()
==
2
) {
$(
"
#ddlSecond
"
).append(
"
<option value='21'>黃色1</option>
"
);
$(
"
#ddlSecond
"
).append(
"
<option value='22'>黃色2</option>
"
);
$(
"
#ddlSecond
"
).append(
"
<option value='23'>黃色3</option>
"
);
}
else
if
($(
this
).val()
==
3
) {
$(
"
#ddlSecond
"
).append(
"
<option value='31'>藍色1</option>
"
);
$(
"
#ddlSecond
"
).append(
"
<option value='32'>藍色2</option>
"
);
$(
"
#ddlSecond
"
).append(
"
<option value='33'>藍色3</option>
"
);
}
});
});
</
script
>
</
head
>