This request came in from a reader and I thought I'd share it. I'm not sure how re-usable it is for others, nor will I promise that it is The Best jQuery Code ever. (Far from it.) But on the off chance the example helps others, I wanted to post it.
The reader had a simple request - set up related selects. I've done this many times before so that part wasn't such a big deal. The only twist here is that he wanted the related selects to only show up when selected.
His data supported, at most, three levels of options. But not every option would have three levels.
Because of this restriction, I decided to simply build my code to support three levels total and not build some high level, super cool, infinite deep relation type doohicky. As it stands, if I were to see 4 or more related selects on a form I'd run away screaming.
Let's then start off with the HTML portion of the code.
You can see my three drop downs in the form block. The second and third drop downs are wrapped in DIV tags and hidden with CSS. Notice too that I've added in the drop downs with no options. The idea here is that I'll use jQuery to hide and manipulate the contents of these tags. Let's look at the code now.
First up is a set of code used to cache my selectors. This is a general jQuery best practice.
I then have change handlers for my two drop downs. (Remember, we only support three levels max. As I said, you could possibly build something fancy that supported N levels, but I'm one of those crazy people who like simple solutions.) In general, both handlers are pretty similar.
They get the value from the drop down and then automatically hide anything "beneath" them. For the first drop down this is both of the related divs. For the second it is only the third.
If a value was selected, an AJAX call is fired off. Typically this would be to a dynamic datasource. To keep things simple I just built some basic static JSON files that return arrays. I can then take that array and populate a select. Note that I abstracted that logic in populateSelect().
And that's pretty much it. Not rocket science, but maybe useful. You can play with the demo by clicking the ginormous button below. This was tested in Chrome, Firefox, and IE10.
Archived Comments
Nice. The advanced application development book for CF has something like this but much more complex. Have made it work on a few areas. Although what you have here is much more simplified and probably much easier for someone to understand ; as it makes for a much easier solution. Agree simplified is better for most.
I didn't mention this, but the user was actually trying to get it working using cfdiv, ajaxproxy and the like. I pushed em to a simple jQuery way.
Interesting, it would seem you sent him to the correct place then. Hey, is it possible to speak to you about the hosting your banner shows on here. Have been looking for a possible VPS plan or a better option of hosting for me and my clients. Have been with hostmysite.com for about 8 years and wanted to get some input on the services Hostek is offering other than what I found on the site. Can we speak by Skype? (317)614-7383
Ty, they advertise with me but the best thing to do is speak to them directly if you have question. I use another host for this machine.
Actually I did speak with them just now. The main reason to speak to you was about the service and how there servers are when it comes to lag time, up time and customer service more less. Have you ever heard anything bad about their services is really what I was needing to get the scoop on. Otherwise, appreciate it. Not sure if you will get any kind of profit off of this since I signed up from your banner. THX Ray, keep the news coming.
Nope, I've not heard anything bad. I'd feel bad taking their advertising if I did. :)
ray, very good example, but i've an idea: you use dor select's an indipendent div, but i think that if you nest divs you can dinamically calculate if a select has a child and populate it; this way your code will be more abstract, imho.
regards
Remember, I was trying *not* to go abstract and go for simple. :)