Can not post selected dropdownlist data after loading using ajax

My ASPX

<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="tz.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery.js"></script>
<script type="text/javascript">

    function ddl_changed() {
        var dc = "#" + "<%=ddl2.ClientID%>";
        var link = '/test.aspx/testfun';
        $.ajax({
            type: 'POST',
            url: link,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                $(dc).get(0).options.length = 0;
                $(dc).get(0).options[0] = new Option("--------Select--------", "--------Select--------");
                $.each(result.d, function (item, value) {
                    var d = value;
                    $(dc).get(0).options[$(dc).get(0).options.length] = new Option(d);
                });                
            },
            error: function (result) {
                alert("Failed");
            }
        });
    }

</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblInfo" runat="server" Text=""></asp:Label>
        <hr />
        <asp:dropdownlist ID="ddl1" runat="server" onchange="ddl_changed()">
            <asp:ListItem>-----Select-----</asp:ListItem>
            <asp:ListItem>-----Test-----</asp:ListItem>
        </asp:dropdownlist>    

        <asp:dropdownlist ID="ddl2" runat="server">
            <asp:ListItem>-----Select-----</asp:ListItem>
        </asp:dropdownlist>    
        <asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" />

    </div>
    </form>
</body>

</html>

AND code behind

public partial class test : System.Web.UI.Page
{

    [WebMethod(EnableSession = true)]
    public static ArrayList testfun()
    {
        ArrayList al = new ArrayList();
        al.Add("test1");
        al.Add("test2");
        al.Add("test3");
        al.Add("test4");
        al.Add("test5");
        return al;
    }

    protected void btnTest_Click(object sender, EventArgs e)
    {
        lblInfo.Text = ddl2.Text;
    }

}

when selection of ddl1 changed, ddl2 get populated with sample data. After selecting any item from ddl2 and clicking Test button, It display first item only.. Why? How can I post the selection I made??

Solution

Use UpdatePanels instead.

Markup:

<asp:dropdownlist AutoPostback="True" OnSelectedIndexChange="BindDDL2" ID="ddl1" runat="server">
    <asp:ListItem>-----Select-----</asp:ListItem>
    <asp:ListItem>-----Test-----</asp:ListItem>
</asp:dropdownlist>

<asp:UpdatePanel id="up1" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsynchronousPostbackTrigger ControlId="ddl1" Event="SelectedIndexChanged" />
    </Triggers>
    <ContentTemplate>
        <asp:dropdownlist ID="ddl2" runat="server" AppendDataBoundItems="True">
            <asp:ListItem>-----Select-----</asp:ListItem>
        </asp:dropdownlist>  
    <ContentTemplate>
</asp:UpdatePanel>

Code-behind:

public void BindDDL2(object sender, EventArgs e)
{
    ArrayList al = new ArrayList();
    al.Add("test1");
    al.Add("test2");
    al.Add("test3");
    al.Add("test4");
    al.Add("test5");
    ddl2.DataSource = a1;
    ddl2.DataBind();
}

By the way, you need to add a ScriptManager on the aspx page.