Ok, so this is a long answer, and has taken me a long time to prepare, so bear with me (and get ready). Also, there is a jsFiddle below if you don't want to read this essay.
You'll be much better off storing each car as an individual object. If you have a database (or plan to have on in the future), this is how your data will be stored. Nested arrays also get exponentially painful, so it's best to stay clear of them. So to begin, we'll change your data structure to this:
var vehicles = [
{ make: 'Ford', model: 'Fiesta', year: '2001', driver: 'me', scale: '1:43' },
{ make: 'Ford', model: 'Fiesta', year: '2005', driver: 'me', scale: '1:33' },
{ make: 'Ford', model: 'Focus', year: '1999', driver: 'you', scale: '1:18' },
{ make: 'Ford', model: 'Modeo', year: '1998', driver: 'Nigel Mansell', scale: '1:43' },
{ make: 'Vauxhall', model: 'Astra', year: '2002', driver: 'James Thompson', scale: '1:43' },
{ make: 'Vauxhall', model: 'Vectra', year: '2000', driver: 'Jason Plato', scale: '1:18' }
];
First thing's first, pre-propuate the initial makes select box:
var makes = get_distinct(vehicles, 'make');
$.each(makes, function(index, value) {
$('select#make').append('<option value="' + value + '">' + value + '</option>')
});
Once you've that, you need to set up a way to filter the data. You'll need functions for filtering the vehicles by the selected options, and getting distinct values. The below filter_vehicles()
is horrible, but I'm tired and it's late, so it'll have to do. You'd be better off making this dynamic, and there'll be an easy solution, but my brain is fried right now.
function filter_vehicles() {
return $.grep(vehicles, function(n, i) {
if ($('#driver').val() != '')
return n.make == $('#make').val() && n.model == $('#model').val() && n.year == $('#year').val() && n.driver == $('#driver').val();
if ($('#year').val() != '')
return n.make == $('#make').val() && n.model == $('#model').val() && n.year == $('#year').val();
if ($('#model').val() != '')
return n.make == $('#make').val() && n.model == $('#model').val();
else
return n.make == $('#make').val();
});
}
// returns distinct properties from an array of objects
function get_distinct(array, property) {
var arr = [];
$.each(array, function(index, value) {
if ( $.inArray(value[property], arr) == -1 ) {
arr.push(value[property]);
}
});
return arr;
}
Then you'll need to update the select boxes. You can do it manually by targeting the change event on each individual select box, but you can also do it dynamically by attaching an event to all select boxes. I prefer this method, because it adds no overhead when adding additional fields.
$('select').change(function() {
// don't execute if this is the last select element
if ($(this).is(':last')) return;
// clear all of the following select boxes, leaving a blank option
$(this).nextAll().html('<option></option>');
// get list of vehicles filtered by all the previous parameters
var filtered_vehicles = filter_vehicles();
// get the next select element
var next = $(this).next();
// get the distinct values from our list of filtered vehicles
var values = get_distinct(filtered_vehicles, next.attr('id'));
// append our options
$.each(values, function(index, value) {
next.append('<option value="' + value + '">' + value + '</option>')
});
});
All in all, you'll get something like this jsFiddle: http://jsfiddle.net/8FHZK/
This is all easier in SQL. So if you do have a database, you'd execute queries on the server to return the filtered set, which cuts out a bit of the yucky code above.
I have no idea why I wrote all this manually, because there's probably a jQuery plugin that already does it all (and better). But hey, it's done, I had fun, and all the code is commented to assist in your learning :)