How to Populate DropDown List using JQuey Ajax

This example shows how to populate the IPL teams into a Dropdownlist via Jquery Ajax.

Sample Code

1. Server Side Code

[WebMethod]

public static string GetIPLTeams(string dataTableName)

{

    DataTable dtIPLTeams = new DataTable(dataTableName);

    dtIPLTeams.Columns.Add("IPLID");

    dtIPLTeams.Columns.Add("IPLTeam");

    dtIPLTeams.Rows.Add("0", "---Select your Team---");

    dtIPLTeams.Rows.Add("1", "Chennai Super Kings");

    dtIPLTeams.Rows.Add("2", "Mumbai Indians");

    dtIPLTeams.Rows.Add("3","Kolkata Knight Riders");

    dtIPLTeams.Rows.Add("4","Delhi Dare Devils");

    dtIPLTeams.Rows.Add("5","Kings XI Punjab");

    dtIPLTeams.Rows.Add("6", "SunRisers Hydrebad");

    dtIPLTeams.Rows.Add("7", "Royal Challengers Bangalore");

    dtIPLTeams.Rows.Add("8", "Rajasthan Royals");

    string result;

    using (StringWriter sw = new StringWriter())

    {

        dtIPLTeams.WriteXml(sw);

        result = sw.ToString();

     }

     return result;

} 

2. Client Side Code

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Ajax Dropdown Populate</title>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $('#btnTeam').click(function () {

            var ddlIPLtXML = $('#ddlIPLTeams');

            var tableName = "IPL7";

            $.ajax({

                type: "POST",

                url: "AjaxDropDown.aspx/GetIPLTeams",

                data: JSON.stringify({ dataTableName: tableName }),

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (response) {

                    // Now find the Table from response and loop through each item (row).

                    $(response.d.toString()).find(tableName).each(function () {

                        debugger;

                        alert('hi');

                        // Get the OptionValue and OptionText Column values.

                        var OptionValue = $(this).find('IPLID').text();

                        var OptionText = $(this).find('IPLTeam').text();

                        alert('hi');

                        alert(OptionValue);

                        alert(OptionText);

                        // Create an Option for DropDownList.

                        var option = $("<option>" + OptionText + "</option>");

                        option.attr("value", OptionValue);

                        ddlIPLtXML.append(option);

                    });

                },

                failure: function (response) {

                    alert(response.d);

                }

            });

        });

    });

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="divDropDown">

        <table>

            <tr>

                <td><asp:button id="btnTeam" runat="server" text="Get IPL Teams" /></td>

            </tr>

            <tr>

                <td><asp:label runat="server" id="lblIPLTeam" text="Team :" /></td>

                <td><asp:dropdownlist id="ddlIPLTeams" runat="server" /></td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

The dropdownlist gets loaded with all the 8 IPL Teams via Jquery Ajax.

Next Recommended Reading Bind DropDown Using jQuery AJAX