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",