Javascript/AJAX car make/model form

Question

Hi guys, I am trying to create a car make/model form using Javascript or AJAX, problem is that I don't have a lot of experience with either, but here it goes. . .

I need to create a form that has a car make and model drop down list in it, and when a user chooses a specific make, the model drop down will be populated with all of the models for that make, now I have a few ideas on how to accomplish that, but I would like some input on what the best way would be to approach this, to cut down on dev time.

I was thinking of creating an array within an array, one with the makes, and within each "make" array have the models array in there, so when the user clicks on a make, a AJAX/Javascript function will fire which will take the value of the current field and use that to get the location of the make in the array, which will then traverse through the inner models array and generate the drop down menu for that specific make.

Now I am not sure if this is a sound idea, or if there is a better way of doing it, but I have very little time to test, so process of elimination is out of the question, so could someone please point me in the general direction I need to go in, or maybe point me to a ready made script? as my understanding of Javascript syntax is little to none at the moment!

Thanx in advance!

Answer 1

The key decision is whether you want to load all of the information at the beginning (in which case the user may experience a delay while you load all of the models for the makes that they don't care about) or whether you want to retrieve the models as they choose a make. The answer will depend on

1. how much data there's likely to be
2. how fast you need the page to be
3. how much load will be on the server etc.

Basically, can you afford the performance impact of loading all of the models at the beginning?

If you decide that you can afford to load everything at the beginning, I think the approach you describe is reasonable, although I wouldn't actually use an array for the outer container. I'd do this:

var models = {
    Audi: ["Quattro","A4", ...],
    BMW: ["M3", "M6", ...],
    ...
};

The thing stored in the "models" variable is actually a javascript object, although people do sometimes call it an "associative array".

Note that in this scenario you aren't really doing "AJAX", as you aren't retrieving data from the server on-the-fly.

The alternative scenario is that you set up a URL where you can query it with a model, and it will respond with a list of makes. Then you fire off the query when the user selects a model. That's AJAX.