JSFiddle - React, Tailwind, and code Playground
HTML
<select name="make" id="make"><option></option></select>
<select name="model" id="model"><option></option></select>
<select name="year" id="year"><option></option></select>
<select name="driver" id="driver"><option></option></select>
<select name="scale" id="scale"><option></option></select>
JavaScript
$(function() {
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' }
];
// set up initial list of makes
var makes = get_distinct(vehicles, 'make');
$.each(makes, function(index, value) {
$('select#make').append('<option value="' + value + '">' + value + '</option>')
});
$('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>')
});
});
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...