Click here to Skip to main content
Click here to Skip to main content

Tagged as

Cascaded dropdown using jQuery

, 28 May 2009
Rate this:
Please Sign up or sign in to vote.
Implementation of cascaded dropdowns using jQuery.

Introduction

In this article, I will explain how to create cascaded dropdowns using jQuery and AJAX. Cascaded dropdowns are provided by the AJAX Control Toolkit, but with this technique, you have much more control over your code, and it is quite easy to expand and implement. Also, jQuery is more lightweight than the AJAX Control Toolkit.

Using the code

The server-side method call by jQuery is as follows:

[WebMethod]
public static Dictionary<string, object> GetFileType(string x, string y)
{
    try{
        Dictionary<string, object> dd = new Dictionary<string, object>();
        dd = GetFromDataBase("Select FiletypeId,Filetypename from M_FileType");
        return dd;
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

private static Dictionary<string, object> GetFromDataBase(string Query)
{
    try
    {
        DataSet ds = new DataSet();
        OracleConnection oCon = new OracleConnection(Your Connection String goes here);
        OracleCommand oCmd = new OracleCommand(Query, oCon);
        OracleDataAdapter da = new OracleDataAdapter(oCmd);
        da.Fill(ds);
        return HimJSON1.ToJson(ds.Tables[0]);
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

In the source code, place the dropdownlists:

<asp:DropDownList ID="ddFileType" class="FillDD" 
  SuccessMethod="outputDT" TargetControl="ddFileColumn" 
  ErrorMethod="ShowError" Item="FILECOLID" 
  Description="NAME" 
  ServerMethod="Default.aspx/GetFileColumn" width="300 px" 
  runat="server">
    <asp:ListItem Value="-1">---Select---</asp:ListItem>
</asp:DropDownList> 

Here, you will see some extra attributes:

  • SuccessMethod: It will be called on successful execution of the server-side method.
  • ErrorMethod: It will be called on exception thrown by the server-side method.
  • TargetControl: ID of the child dropdown which will be bound on the selected index change of the parent dropdown.
  • Item: Item field of the child dropdown which will be bound to the table column returned by the datatable.
  • Description: Description field of the child dropdown which will be bound to the table column returned by the datatable.
  • ServerMethod: Name of the server-side method which will be called by jQuery.

Exploring the JS code

  • function outputDT: This function is called when a successful result has been returned by the server-side method. In this method, I have called the BindDropdown() method which takes care of binding the child drop down. You can modify this method to implement any additional functionality.
  • function ShowError: This function is called when there is any exception thrown by the server-side method. You can modify this function to handle exceptions gracefully.
  • $('.FillDD').change(function(e): This will be called every time on the selected index change of the dropdown which has an attribute class="FillDD".

Note: Instead of using a server-side method, you can also use a Web Service.

Here, as you can see, it requires only writing some attributes to your parent dropdown and you are ready to use the cascaded dropdowns.

Points of interest

In the source code, you will find two files in the App_code folder. In these, I have implemented two different approaches to convert a datatable to JSON which you will find quite interesting and useful. You can use these classes not only here but in any project where you want to convert a datatable to JSON.

Any suggestions and improvements will be highly appreciated.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

himanshu2561
Web Developer
India India
g

Comments and Discussions

 
GeneralGood stuff PinmemberMatt Sollars29-May-09 4:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140821.2 | Last Updated 28 May 2009
Article Copyright 2009 by himanshu2561
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid