<html xmlns="
http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=DropDownList1.ClientID %>').bind("change", function () {
$('#<%=DropDownList2.ClientID %> option').remove();
var dropList = $('#<%=DropDownList2.ClientID %>')
dropList.append("<option value=''>please select</option>");
if ($(this).val() == "1") {
dropList.append("<option value='A1'>A1</option>");
}
if ($(this).val() == "2") {
dropList.append("<option value='B1'>B1</option>");
dropList.append("<option value='B2'>B2</option>");
dropList.append("<option value='B3'>B3</option>");
}
if ($(this).val() == "3") {
dropList.append("<option value='C1'>C1</option>");
dropList.append("<option value='C2'>C2</option>");
dropList.append("<option value='C3'>C3</option>");
}
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="" Text="please select"></asp:ListItem>
<asp:ListItem Value="1" Text="ItemA"></asp:ListItem>
<asp:ListItem Value="2" Text="ItemB"></asp:ListItem>
<asp:ListItem Value="3" Text="ItemC"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
</div>
</form>
</body>
</html>
<head runat="server">
<title></title>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=DropDownList1.ClientID %>').bind("change", function () {
$('#<%=DropDownList2.ClientID %> option').remove();
var dropList = $('#<%=DropDownList2.ClientID %>')
dropList.append("<option value=''>please select</option>");
if ($(this).val() == "1") {
dropList.append("<option value='A1'>A1</option>");
}
if ($(this).val() == "2") {
dropList.append("<option value='B1'>B1</option>");
dropList.append("<option value='B2'>B2</option>");
dropList.append("<option value='B3'>B3</option>");
}
if ($(this).val() == "3") {
dropList.append("<option value='C1'>C1</option>");
dropList.append("<option value='C2'>C2</option>");
dropList.append("<option value='C3'>C3</option>");
}
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="" Text="please select"></asp:ListItem>
<asp:ListItem Value="1" Text="ItemA"></asp:ListItem>
<asp:ListItem Value="2" Text="ItemB"></asp:ListItem>
<asp:ListItem Value="3" Text="ItemC"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
</div>
</form>
</body>
</html>