Populating a Select Menu based off two other Select menus

[GOMLP]

Taking the sample code from the QuForm online documentation I am wondering how to modify the code to allow the population of the target select menu to be based off the results of two previous select menu.

For example:
Select Menu 1: Shows units of measurements (Metric and Imperial)
Select Menu 2: Shows a list of shapes (circle, square, rectangle, etc.)
Target Menu 3: will then show a list of available sizes based on Select Menu 1 and Select Menu 2

Below is the code from your online documentation and I am wondering how I would modify it to allow the Target menu to be based off two results of Select 1 and Select 2.

Any guidance on this subject would be greatly appreciated.

jQuery(function ($) {
var $select1 = $(‘.quform-field-1_3’),
$select2 = $(‘.quform-field-1_4’);

var data = {
‘Toyota’: [
{ text: ‘Camry’, value: ‘camry’ },
{ text: ‘Corolla’, value: ‘corolla’ },
{ text: ‘RAV4’, value: ‘rav4’ }
],
‘Ford’: [
{ text: ‘F-150’, value: ‘f-150’ },
{ text: ‘Focus’, value: ‘focus’ },
{ text: ‘Kuga’, value: ‘kuga’ }
],
‘Volkswagen’: [
{ text: ‘Golf’, value: ‘golf’ },
{ text: ‘Polo’, value: ‘polo’ },
{ text: ‘Tiguan’, value: ‘tiguan’ }
]
};

$select1.on(‘change’, function () {
var value = $select1.val(),
options = [new Option(‘Please select’, ”)];

if (data[value]) {
for(var i = 0; i < data[value].length; i++) {
options.push(new Option(data[value][i].text, data[value][i].value));
}
}

$select2.html(options).prop(‘selectedIndex’, 0);
}).change();
});

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[GOMLP]

Thank You Ally,

Once again you provide fast and reliable responses, this is exactly what I was looking for, but every time I tried I brought down the rest of my code….. Hope all is well across the pond and stay safe.

[Author]

Posts