How to populate dropdown list from database by passing radio button list’s selected value as parameter with JQuery?

How to populate drop down list from database by passing radio button list’s selected value as parameter with J Query, J Son?

In my project I am taking off update panel where ever possible and replacing it with J Query Ajax. J Query Ajax is far better then Ajax and update panel.  I am populating 259 countries list on the basis of parameter passed from radio button list’s selected text. Using radio button list and drop down list inside update panel keeping Radio button list’s auto post back property to true. First time running application from visual studio and clicking on the radio button list item populated drop down list in “176ms” and when chose same option second time it took “76ms” while same Ajax request using J query  took “79ms” for first time and  when chose same option second time it took “32ms”.

J Query code to decode j son result and populate drop down list

<script type=”text/javascript”>

function getCountries()


var elementId = ‘<%=rblUKInternational.ClientID%>’;

var elementRef = document.getElementById(elementId);

var checkBoxArray = elementRef.getElementsByTagName(‘input’);

var checkedValue =“”;

var isChecked = false;

for (var i = 0; i < checkBoxArray.length; i++) {

if (document.getElementById(elementId + “_” + i.toString()).checked == true) {

var checkBoxRef = checkBoxArray[i];


Chekced = false;








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




if (response.length<=4)


alert (response);




var myObject= eval(“(“+ eval(response)+ “)”);

$(‘#<%=DropDownListCountry.ClientID %>>option’).remove();

$(“#<%=DropDownListCountry.ClientID %>”).append($(‘<option></option>’).val().html(“Please select…”));

for (var i=0;i<=myObject.length-1;i++) {

$(“#<%=DropDownListCountry.ClientID %>”).append($(‘<option></option>’).val(myObject[i].countrycode).html(myObject[i].name));




error: function (response)


if (response.length!=0)

alert(response.status + ‘ ‘ + response.statusText);




Web service code to get data from SQL server 2005 and encode into J Son format

using System;

using System.Data;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.ComponentModel;

using System.Web.Script.Services;

using System.Web.Script.Serialization;

using System.Text;

using System.Collections.Generic;


/// <summary>

/// Summary description for WsCountry

/// </summary>


public class WsCountry : System.Web.Services.WebService



public string getCountryList(string optionvalue)




StringBuilder sbcountriesList = new StringBuilder();

if ((optionvalue != “GB”) &&

(optionvalue != “INT”))

throw new ApplicationException(string.Format(“Country code GB or INT expected, {0} received”, optionvalue));

CountryService cs = new CountryService();

TList<Country> countries = cs.GetAll(optionvalue);

List<Dictionary<string, string>> rows = new List<Dictionary<string, string>>();

foreach (Country country in countries)


Dictionary<string, string> Dictionary = new Dictionary<string, string>();

Dictionary.Add(“name”, country.DisplayName);

Dictionary.Add(“countrycode”, country.CountryCode);



JavaScriptSerializer js = new JavaScriptSerializer();

js.Serialize(rows, sbcountriesList);

return sbcountriesList.ToString();


catch (Exception ex)


return ex.Message;





C# code to call JavaScript function on the radio button list selected item


Tags: , , , , ,

2 Responses to “How to populate dropdown list from database by passing radio button list’s selected value as parameter with JQuery?”

  1. Bilal says:

    Gooood Work!

    it helped me a lot, specially transferring data from code-behind to jquery.