All of them would require some use of JavaScript. But I can at least get you started. Since you haven't stated anything about any other use of Javascript I'll suspect that you're not to familiar with the subject, and I'll also use mootools for the code-snippets I'll post here.
function buildSelect(select, options)
{
var select = $(select);
select.empty();
options.each(function(item) {
if($type(item) != "array")
{
item = [item, item];
var option = new Element("option", {
text: item[0].toString(),
value: item[1].toString()
});
option.inject(select);
}
});
}
The following code will take a javascript-array (eather a simple array or an array of array consisting of [text, value] pairs) and populate an select with them. So that's the basic of your code.
Now some html, you wanted 2 selects, one master and one slave:
<select id="master">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
</select>
<select id="slave">
</select>
Pretty straight forward so far, now let's make a domready function. If you're not familiar with domready it's a bit like onload, but it's fired before the onload event. domready is fired when the DOM-model is ready-built and is a mootools-spesific thing.
function domready()
{
$('master').addEvent('change', master_changed);
}
That is all we need for our domready function. Now we need to build the master_changed function which will be fired every time the master-select is changed. But here is where we need to determine what method to use, the preloaded or the lateloaded method. This one will be using the lateloaded.
function master_changed()
{
var req = new Request.JSON({
url: 'getmodels.php',
method: 'post',
data: 'brand=' + encodeURIComponent($('master').get('value'))
});
req.addEvent('success', function(response) {
buildSelect('slave', response);
});
req.send();
}
The other way is to preload, to do that you initially have to build up an array of what brands have what models. This can be done as following:
var cars = {
"BMW": ["Z3", "Z4"],
"Audi": ["A4", "A3"]
}
Then the master_changed-function needs to be updated to this:
function master_changed()
{
var s = $('master').get('value').trim();
buildSelect('slave', cars[s]);
}
The last thing you need to do is to make shure that the domready-function is ever called. You do this simply by adding the line
window.addEvent('domready', domready); outside of all the functions.
HTH
Marked Solved 
Offline 
