Populating a Select Menu based off two other Select menus

Home Forums Quform WordPress Populating a Select Menu based off two other Select menus

This topic is: resolved
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #33465
    GOMLP
    Participant

    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();
    });

    #33467
    Ally
    Support Staff

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

    #33472
    GOMLP
    Participant

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy