Dependent Dropdown not populating in cascading Dropdown using Jquery

Last Reply one day ago By AnandM

Posted 4 days ago

Hello there,

I am using jquery for cascading dropdown lists. one for continent and other for corresponding countries.

The continent dropdown is populating but the countries just shows loading and doesnt get populated. I tried with the break point, the list is getting populating, it just the dropdown is not getting activated or shows data. The following is the code i have written:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type = "text/javascript">
    var pageUrl = '<%=ResolveUrl("~/Dropdown.aspx")%>'
    function PopulateContinents() {
        $("#<%=ddlSubcategory.ClientID%>").attr("disabled", "disabled");

        if ($('#<%=ddlCategory.ClientID%>').val() == "0") {
            $('#<%=ddlSubcategory.ClientID %>').empty().append('<option selected="selected" value="0">Please select</option>');

        else {
            $('#<%=ddlSubcategory.ClientID %>').empty().append('<option selected="selected" value="0">Loading...</option>');
                type: "POST",
                url: pageUrl + '/PopulateCountries',
                data: '{continentName: ' + $('#<%=ddlCategory.ClientID%> option:selected').html() + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnCountriesPopulated,
                failure: function (response) {

    function OnCountriesPopulated(response) {
        PopulateControl(response.d, $("#<%=ddlSubcategory.ClientID %>"));

<script type = "text/javascript">
    function PopulateControl(list, control) {
        if (list.length > 0) {
            control.empty().append('<option selected="selected" value="0">Please select</option>');
            $.each(list, function () {
        else {
            control.empty().append('<option selected="selected" value="0">Not available<option>');

    <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <td><asp:DropDownList ID="ddlCategory" runat="server" AppendDataBoundItems="true"
             onchange = "PopulateContinents();" >
    <asp:ListItem Text = "Please select" Value = "0"></asp:ListItem>                 
                    <asp:DropDownList ID="ddlSubcategory" runat="server">
    <asp:ListItem Text = "Please select" Value = "0"></asp:ListItem>                 

<br /><br />


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;
using System.Web.DataAccess;
using System.Data.OleDb;
using System.Drawing;
using System.Linq;

public partial class Dropdown : System.Web.UI.Page

    protected void Page_Load(object sender, EventArgs e)

    private void GetContinentList()
        OleDbConnection cn = new OleDbConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["globe"].ConnectionString);
        OleDbCommand cmdconti = new OleDbCommand("select * from ContinentTable order by ContiName", cn);
        cmdconti.CommandType = CommandType.Text;
        OleDbDataAdapter da = new OleDbDataAdapter(cmdconti);
        DataSet ds = new DataSet();

        ddlCategory.DataSource = ds;
        ddlCategory.DataTextField = "ContiName";
        ddlCategory.DataValueField = "ContiName";


    public static ArrayList PopulateCountries(string continentName)
        ArrayList list = new ArrayList();
        String strConnString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["globe"].ConnectionString;
        String strQuery = "select countryID, countryName from CountryTable where continentName=@continentName order by countryName";
        using (OleDbConnection con = new OleDbConnection(strConnString))
            using (OleDbCommand cmd = new OleDbCommand())
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@continentName", continentName);
                cmd.CommandText = strQuery;
                cmd.Connection = con;
                OleDbDataReader sdr = cmd.ExecuteReader();
                while (sdr.Read())
                    list.Add(new ListItem(
                return list;

    private void PopulateDropDownList(ArrayList list, DropDownList ddl)
        ddl.DataSource = list;
        ddl.DataTextField = "Text";
        ddl.DataValueField = "Value";


I dont know if i am missing anything...

Hope someone can help me out.

You are viewing reply posted by: AnandM 4 days ago.
Posted 4 days ago
jain4 says:
 data: '{continentName: ' + $('#<%=ddlCategory.ClientID%> option:selected').html() + '}',

 replace above code with below

data: '{continentName: "' + $('[id*=ddlCategory] option:selected').html() + '"}',


I agree, here is the link: