Populate multiple select box based on selection from a previous select list

Question

I have quite a complex problem that I cannot seem to solve.

I have an Input text box field that populates a select list, when the user inputs a certain 'term' in the textbox.

- If a user inputs the word 'Mercedes' in the text box, the select list will be populated with 'A-class', 'B-class', 'C-class', 'S-class'
- If they enter 'Audi' in the text box, the select list is populated with 'A4', 'A5', 'A6' etc.

This so far behaves the way in which I intended it to. However, I would like to create a <div> below that is dynamically populated with the corresponding selected vehicle's accessories, when a user selects a model from the the select list.

Here is the code I have so far:

HTML

<div>
Manufacturer:<input type="text" id="car_manufacturer"/>
Model: <select id="car_model"></select>
</div>

<p>Vehicle Model Accessories:</p>
<div id="model_accessories">
<!--- Here is a list of the selected vehicle model's accessories. It will change when the model selection changes ------> 
</div>

Javascript

vehicleModels = {
   "Mercedes": ["A-class", "B-class", "C-class", "S-class", "SLK", "ML", ],
   "Audi": ["A3", "A4", "A5", "A6", "A7", "A8", ],
   "BMW": ["120", "320", "330", "520", "635", "745", ]
}

This function takes the value in the textbox and checks if it is defined in the object above. If it is, the corresponding vehicle models are appended to the select list.

    $('#car_manufacturer').change(function() {
            if(vehicleModels[$(this).val()]) { 
                $.each(vehicleModels[$(this).val()], function() { 
                    $('#car_model').append('<option>' + this + '</option>');
                 });
            } 
});​

Here is where the problem begins!How can I now populate the model accessories <div> with the corresponding selected model's accessories? Here is how the car accessories are being stored at the moment.

mercedes_accessories = ["Xenons", "Adaptive cruise control", "sunroof"];
bmw_accessories = ["Start/stop", "heated seats", "Leather trim"];
audi_accessories = ["Electric seats", "B&O Sound System", "Leather trim",];

Any help would be greatly appreciated. I'm sorry if the question is a bit vague, it's quite difficult to explain. Thankyou!

Answer 1

I'd do something like this :

var vehicleModels = {
       mercedes: ["A-class", "B-class", "C-class", "S-class", "SLK", "ML", ],
       audi: ["A3", "A4", "A5", "A6", "A7", "A8", ],
       bmw: ["120", "320", "330", "520", "635", "745", ]
    },
    vehicleAcc = {
        a3 : ["Xenons", "Adaptive cruise control", "sunroof"],
        a4 : ["Xenons", "Adaptive cruise control", "sunroof"],
        a6 : ["Xenons", "Adaptive cruise control", "sunroof"]
    };


$('#car_manufacturer').on('change', function() {
    if(this.value.toLowerCase() in vehicleModels) { 
        $.each(vehicleModels[this.value.toLowerCase()], function(i,e) { 
            $('#car_model').append('<option>'+e+'</option>');
        });
    }
});

$('#car_model').on('change', function() {
    if (this.value.toLowerCase() in vehicleAcc) {
        $.each(vehicleAcc[this.value.toLowerCase()], function(i,e) {
            $('#car_model_acc').append('<option>'+e+'</option>');
        });
    }
});

FIDDLE

Answer 2

Try this:

var accessories;

accessories.mercedes = ["Xenons", "Adaptive cruise control", "sunroof"];
accessories.bmw = ["Start/stop", "heated seats", "Leather trim"];
accessories.audi = ["Electric seats", "B&O Sound System", "Leather trim"];

$("#car_model").change( function( ) {

    // cache accessories for this manufacturer
    var arr = accessories[ $("#car_manufacturer").val().toLowerCase() ];

    for( var i = 0; i < arr.length; i += 1 ) {
       $("#accessories").append("<option>" + arr[i] + "</option>");
    }
});