jump to navigation

Cascading Dropdown Lists with jQuery (parent / child select options) March 9, 2009

Posted by codinglifestyle in ASP.NET, C#, CodeProject, Javascript, jQuery.
Tags: , , , , , , , ,
trackback

 

Recently I was tasked with merging 3 similar screens in to one.  I took stock of the commonalities and decided a Category and Subcategory dropdown list would suffice.   As you’d expect the contents of the Subcategory dropdown depend on the selected Category.  Obviously I wanted to avoid postbacks so I first looked to the Ajax Control Toolkit’s CascadingDropDown extender to link the parent to the child.  In my case, there were only a dozen subcategories so a webservice seemed like overkill.

After attending Tech-Ed 2008 and seeing Microsoft throwing its weight behind jQuery I decided to have a look.  So what follows is my first foray in to jQuery and I’m quite pleased with the results.

First, we define an enum in the codebehind which can be used for bitwise operations.

public enum Category

{

Invoice     = 1,

Order       = 2,

Shipment    = 4   //Fourth item would be 8, then 16, 32, …

}

Next I wanted to be able to use the enum to specify the Category (only specifying one) and Subcategory items (bitwise OR any combination).

_DropDownCategory.Items.Add(GenerateListItem(“Orders”, Category.Order, false));

_DropDownCategory.Items.Add(GenerateListItem(“Invoices”, Category.Invoice, false));

_DropDownCategory.Items.Add(GenerateListItem(“Shipments”, Category.Shipment, false));

_DropDownSubcategory.Items.Add(GenerateListItem(“Purchase Orders”, Category.Invoice | Category.Order | Category.Shipment, false));

_DropDownSubcategory.Items.Add(GenerateListItem(“Quote Number”, Category.Order, false));

_DropDownSubcategory.Items.Add(GenerateListItem(“Customer Project Number”, Category.Shipment, true));

The enum was converted to a number and added as a custom attribute to the new list item in GenerateListItem():

li.Attributes.Add(“Category”, ((int)eCat).ToString());

Enter jQuery, first we’re going to need to keep a copy of all the available Subcategory items.  Each time we change the Category we will be showing a subset of this array which we must keep separate in memory.

var optSubCat = null;

$(function() {

//Make a copy in memory of all the subcat options

optSubCat = $(“#_DropDownSubcategory”).children().clone();

//Default subcat to “Orders”

ddSubcategoryUpdate(2);

});

Then we need an event to fire when the Category is changed.

$(function() {

$(“#_DropDownCategory”)

.bind(“change”, function(event) {

var eCat = this[this.selectedIndex].attributes(“Category”).value;

ddSubcategoryUpdate(eCat);

});

});

Note how jQuery allows us to wire up DOM events after the fact to our .NET controls.  Here we add an onchange event dynamically rather than injecting this via the codebehind which forces us to put javascript code in the wrong place.  All we’re doing is pulling the value of the enum from the selected Category and then passing it to a function which will update the Subcategory items.

function ddSubcategoryUpdate(eCat) {

//Remove all items from drop down

$(“#_DropDownSubcategory”).children().remove();

//For each subcat item: test if it belongs in eCat, if so add it

$(optSubCat).each(function() {

if (($(this).attr(“Category”) & eCat) > 0) {

$(“#_DropDownSubcategory”).append($(this).clone()[0]);

}

});

}

And finally, in the if statement we see we test each Subcategory item previously saved in memory to see if it matches the enum value of the Category.

What we’ve ended up with is a very powerful yet simple mechanism for cascading dropdowns using enums in our codebehind.  It’s easier to wire up than what the Ajax Control Toolkit provides, its all script so the UI looks good, and while this could have been done in straight javascript it demonstrates the power and simplicity of the jQuery library.

About these ads

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: