This project has moved and is read-only. For the latest updates, please go here.

Cascading Drop Downs

May 22, 2011 at 2:54 AM
Edited May 22, 2011 at 3:38 AM

I dipped into the source to see how you bind change events to a 20+ ddl and would like to know if you can explain a portion of the code:


		// If the selection hasn't changed, then there's nothing to do right now.  This is useful to reduce
		// the number of Web Service calls when the parentSelect.Type = "C" or "M", as there are multiple propertychanges
		// which don't require any action.  The attribute will be unique per child column in case there are
		// multiple children for a given parent.
		var childColumnStatic = $().SPServices.SPGetStaticFromDisplay({
			listName: opt.listName,
			columnDisplayName: opt.childColumn
		if(parentSelect.Obj.attr("SPCascadeDropdown_Selected_" + childColumnStatic) == parentSelectSelected.join(";#")) return;
		parentSelect.Obj.attr("SPCascadeDropdown_Selected_" + childColumnStatic, parentSelectSelected.join(";#"));


I'm trying to .bind() to a 20+ ddl manually.  I don't need the cascading effect, but I definitely need to prevent the event from firing until a selection has been made.  I am successful in binding to the input control, but I'm not sure where to begin with preventing the code from firing multiple times.


		$( "td input" ).bind( "propertychange", function() {
			var $changedDDL = $(this);
			console.log( $changedDDL.attr("title") );


I appreciate any thoughts on this! :-)


May 23, 2011 at 2:01 PM


Because there is a lot going on behind the scenes with complex dropdowns, there are multiple property changes for every user action. I found that the best way to ensure that I was seeing a real change was to store the existing value in my own attribute called "SPCascadeDropdown_Selected_" + childColumnStatic. That way, whenever there's a property change, I can simply check my attribute to see if it matches the current selection. If it does, then I don't need to do anything.


May 23, 2011 at 5:55 PM

Thanks for the feedback.  I came to the same assumption based on your demo site.  When I coded it, I ended up coding an infinite loop.  I was trying to find out how you applied the attribute first and then update the attribute w/o firing the event again.  

I'm able to apply the attribute and then add the change event, but I need to update the attribute after the selection has been made.  Changing the attribute is firing the change event all over again and causing an infinite loop. :/

$( "td input" ).attr( "InitialSelection", "None" );	
$( "td input" ).bind( "propertychange", function() {
			var $changedDDL = $(this);
			var $changedDDLSelection = $changedDDL.attr("InitialSelection");
			console.log( $changedDDL.attr("title") );
$changedDDL.attr( "InitialSelection", $changedDDLSelection ); 
I just coded this off the top of my head, but it's the same logic I think you are applying minus the check of the initialselection...  It seems like changing the attribute is firing the "propertychange" event and looping...  

How did you do it? 

May 24, 2011 at 3:29 PM

You're not testing to see if the value has changed; you're just changing it.