Interdependent Dropdowns

Yamini · January 5th, 2009, 03:31 AM

Hi! i have 2 drpboxes whose values r feteched from DB...the 2nd box depends on the selection in the 1st box(like the age-old country n state dropdowns )....the catch is it needs to b done using javascript..any clues how to create interdependent boxes using .js?....

joefawcett · January 5th, 2009, 04:21 AM

So you need to do the following:

Populate the first dropdown
Have a data structure, such as a hash of arrays that hold the mappings between the two properties.
Have an onchange handler in the first dropdown that examines the currently selected value and populates the second dropdown with the relevant items by creating a new Option and adding it to the options collection.

The data structure would look something like:

Code:

var oMapping = {1: ['One', 'Two', 'Three'],
                        2: ['Four', 'Five', 'Six'],
                        3: ['Seven', 'Eight', 'Nine']};

Then if 2 weer the selected value in the first dropdown you would populate the second with the items, 'Four', 'Five' and 'Six'.

Yamini · January 5th, 2009, 07:30 AM

I need these Datas to b dynamically fetched from the DB ...tried trigger inside updatepanel but that way the dropdown works only on the second click ....using javascript along with ajax is THE way but my boss doesn't want webservice so ....

joefawcett · January 5th, 2009, 11:51 AM

Well you don't need Ajax, with or without an update panel. You just need the data embedded in the page in the manner I showed earlier.

Old Pedant · January 5th, 2009, 06:59 PM

...and JavaScript here:
http://www.ClearviewDesign.com/Newbie
Look on the DEMOS page for the demo titled
"Multiple drop-down lists, subcategories via JavaScript."

The technique would work with virtually any server-side language. It happens to work especially well with ASP because of the ADODB.RecordSet.GetString function, but you could easily emulate that function's effect in most any system.

Yamini · January 8th, 2009, 01:44 AM

hi! thanks for the quick reply but my problem seems to 've compounded since then...i've now 4 interdependent boxes say A,B,C,D...A is the main DD which starts the cascading effect so B depends on A , C on B n D on C ....storing all these in an array and mapping them seems too complicated... as i mentioned earlier trigger in ajax seems to do the trick but only on the second click, as in the first time it seems to fetch data n all looks like filling the DD(stack trace) but does nothing , it actually fills the DD n the consequent cascading action on the 2nd time a) why does it happen that way when i use an update pannel b) repeat Q a

Old Pedant · January 8th, 2009, 05:26 AM

You have an error in your AJAX code, some place. What you describe has worked flawlessly for me, in the past.

Now, granted, I tend to "roll my own" HTML and JavaScript and AJAX code.

And I don't know why you are referring to a "panel". Not sure how a panel is relevant to choosing an <OPTION> in a <SELECT>. Dare I assume that you are using ASP.NET??? Or perhaps some JSP framework?? Possibly the framework code (.NET or whatever) is "swallowing" your first click??? Maybe you are just allowing the tools and/or framework to control too much?

You show no code, so you just leave us guessing. Sorry.

Yamini · January 8th, 2009, 07:41 AM

thanks a ton.....ya i'm using '.NET or whatever'..i did the stupidest mistake one cud think of .....i was so hung up with a Js way of doing it that the obvious passed right over my head...got it working using the traditional ajax way..abt the update panel ... these DD r part of a larger page(obviously) so i did not want that part to postback...