Creating a varied number of dropdown lists dynamically

[cbassett03]

I'm working on an AJAX based site (which also involves PHP and MySQL) and I'm trying to create a product selection system, where someone can start with a dropdown list of very generic items, and slowly (through additional drop down menus) "narrow" down to the specific item or class of items they are looking for.

 

My problem is this:  I'm not sure how to go about the dynamic portion of it.  Should I just create a bunch of drop down lists, and then through Javascript, hide or show them as needed, or should I create them dynamically as I need them?  My other issue is that for some items, the lists may be only 2 or 3 levels deep, whereas for others, it may be 4-6 levels deep.

 

I'm trying to minimize the amount of HTML code, so I can decrease the page size and browser processing time, so any advice would be helpful.

I am quite experienced in Javascript, HTML, PHP and MySQL.  Lastly, I DON'T want to use any third-party libraries, such as jQuery--it needs to be hand-coded by me.

[Psycho]

The answer is - it depends. It's difficult to really provide a "best" solution without knowing all the particulars. I see three possible options:

 

1. Create ALL the drop-downs ahead of time and just us JS to hide/display as needed.

2. Dynamically create each of the drop-downs dynamically using just client-side code. I'd probably save all the data for all the levels in a multi-dimensional array.

3. Create the drop-downs dynamically using AJAX.

 

Unless you have a small number of drop-downs and levels, I'd go with #2 or #3. Having all the drop-downs created ahead of time would make it hard to process the data because you have to check the first field to determine the next field to process. If you dynamically create the options you can create them in a logical format to make processing easier.

 

As for #2 or #3, #2 would be better performance. But, if you have a ton of data then it might be more efficient to go with #2.

[cbassett03]

I ended up using suggestion #3.  But my problem now is that in most cases I may have 3 or more drop down menus.  But the right most drop down menu depends on the previous drop down menu to the left of it (they show up progressively from L to R). 

 

Anyone want to suggest how I can delete or removed any "down stream" drop down lists when a "parent" list is changed.  The lists are all chained and as you work through the lists, they narrow down based on particular characteristic or class type.

 

Here's an example using cars:

 

Car > Ford > 2000 > Taurus > SEL

 

Let's say I want to change it to a 2002 Taurus.  I would chang ethe value in the "year" list from 2000 to 2002, but I want the dynamically created lists that contain the model and trim level to be removed so that when the year is changed, the model list would be repopulated with models that were available in that year.

Edited August 5, 2013 by cbassett03

[fastsol]

First, why wouldn't you want to use a library like jquery for stuff like this?  It makes life so much easier to achieve this kind of thing with way less coding on your part.  Second, to clear the previous boxes, you need to check when a earlier box is changed and then clear the others, again jquery makes this easy.  If you want to PM me I have a car make, model, year api that I distribute and it does the functionality you are asking about, so you could take a look at that code to help you.