client side dynamic dependent list boxes

There comes a time when you'll need to develop a "Client-Side Dynamic Dependent List Box." What does this mean? In short... selecting one item in the "parent" list box will change the list in the "child" list box.

» Download available at bottom of page.

Building upon the excellent tech note at Macromedia (the developers of Dreamweaver), I have easily created a client-side dynamic dependent list box. For more information on what I'm actually talking about here, I'd recommend you review the tech note at the link I just provided.

Now that you've read the tech note, let me explain why I've added this page here. There is a shortcoming in the technique Macromedia uses in their JavaScript. In particular, if you are validating your Child List Menu in a form, then you typically use a script that does not allow the 1st item in the menu to be selected.

After some help from Mick White, we made some minor modifications to the Macromedia code which adds a "Please Select" item at the top of each Child List menu which is highlighted as well. Having it highlighted is key in our validation; the validation script can now recognize that the first item is selected and will not allow the user to proceed unless they make another selection.

Finally, I added a slight modification which will display a message to the user if no items in the Child List Menu are available, i.e., "No SubCategories are Available" - go ahead and try the List Menus below; at least one of them should have no items available.

All of the asp/vbscript I used is the same found at the Macromedia Tech Note I mentioned before; I modified one function, which can be found at the bottom of this page. Look under the hood to view the outputted code.

Parent List Menu Child List Menu

Making any selection here repopulates the Child List Box on the right.

This set will say "Please Select" whenever it is re-populated from the Parent List Box. It will now maintain it's original height of 10 lines and will not grow/shrink vertically based on content.

I've included some sample code for you to download if you like. The zip file includes:

  1. A sample Database
  2. A sample page with all the code ready to go
  3. A connection to the database

All You need to do is unzip the files into a common folder and run the .asp page on an IIS server.

The code is available as a download »» Download the code

Bonus code:
how to perform an update using dependent list menus »» Download the code

Keywords:
  • Client Side,
  • Dynamic,
  • Dependent,
  • List,
  • Box,
  • ASP,
  • JavaScript
 

All of the code and examples presented in my playground are either modifications of open source code or original works of Kindler Chase DBA Roubaix Interactive or a combination of both and are Copyright protected unless noted otherwise. You may not use the code here without asking first. OK, so I know you're not going to ask, so how about a nice thank you for playing gift?

 •  got css?  •  got xhtml?  •  wanna cube?

This page last updated on 10/24/2007