Linking Dropdown Boxes

Ask the community
,
1

Hi there,

I am hoping someone might be able to help me. We are creating a site that sells car parts for a lot of vehicles and I am looking at a way of liking dropdowns to be able to select a customers vehicle… for instance

Dropdown 1 - Choose Manufacturer (Customer then chooses make of vehicle)
Dropdown 2 - Then shows all the models that the manufacturer makes
Dropdown 3 - Would then display the year of manufacture

upon selecting the third choice all parts for that make model and year would be displayed.

Is this something that is possible within the confounds of Wix at all?

Thanks so much for your help,

Jon

2

The following example might help:

Cascading Form
Automatically populate a form element with options based on a previous selection.

3

Thats exactly what i want! now i just have to learn how to do it! thank you :slight_smile:

4

Ok, I have tried but I just don’t know enough lol!! So I have the first 2 dropdowns linking no problems, If I select the model the second dropbox changes to say pick your model and based on the first selection, my next issue is getting the year to change dependant on the model selected by the second box…

this is my code so far…

import {Manufacturer, modelAudi, modelMINI, vehicleyearAudiA1} from 'public/Manufacturer';

$w.onReady(function() {
    $w('#Model').options = Manufacturer;
    $w('#Manufacturer').onChange(() => {
 if ($w('#Manufacturer').value === 'Audi') {
            $w('#Model').options = modelAudi;
            $w('#Model').placeholder = 'Select Audi Model';
            $w('#Model').enable();
        }           
 if ($w('#Manufacturer').value === 'MINI') {
            $w('#Model').options = modelMINI;
            $w('#Model').placeholder = 'Select MINI Model';
            $w('#Model').enable();
        }   
 else if ($w('#Model').value === 'A1') {
                    $w('#Year').options = vehicleyearAudiA1;
                    $w('#Year').placeholder = 'Select A1 Year';
                    $w('#Year').enable()
        }
    });
});

Thanks for your help :slight_smile: and let me know if you need more information

5

I tried this code but the second 2 dropdowns update when you make the selection in the first dropdown… so for instance i will pick ‘Audi’ and dropdowns 2 and 3 will update with the model and the year. the year however remains no matter what choice is chosen from the other 2 dropdowns

import {Manufacturer, modelAudi, modelMINI, vehicleyearAudiA1} from ‘public/Manufacturer’ ;

$w.onReady( function () {
$w( ‘#Model’ ).options = Manufacturer;
$w( ‘#Manufacturer’ ).onChange(() => {
if ($w( ‘#Manufacturer’ ).value === ‘Audi’ ) {
$w( ‘#Model’ ).options = modelAudi;
$w( ‘#Model’ ).placeholder = ‘Select Audi Model’ ;
$w( ‘#Model’ ).enable();
}
if ($w( ‘#Manufacturer’ ).value === ‘MINI’ ) {
$w( ‘#Model’ ).options = modelMINI;
$w( ‘#Model’ ).placeholder = ‘Select MINI Model’ ;
$w( ‘#Model’ ).enable();
}
else if ($w( ‘#Manufacturer’ ).value === ‘Audi’ ) {
($w( ‘#Model’ ).value === ‘A1’ );
$w( ‘#Year’ ).options = vehicleyearAudiA1;
$w( ‘#Year’ ).placeholder = ‘Select A1 Year’ ;
$w( ‘#Year’ ).enable()
}
});
});

6

here is a linkto the webpage… for an example https://contact827026.wixsite.com/torquemonkeyperf/shop

7

You really aren’t changing the year. From what I understand, you want to first select the manufacturer, and then the models list changes. Then when you choose a model, you want the years list to change. Therefore, you will need another onChange() function for the Model dropdown, and then based on the selection of a model, you can set the years dropdown list.

Please realize that you can’t just “copy and paste” code and expect it to work. You need to understand what’s happening if you expect to be able to write code that does what you want.

I would recommend reading the following articles that will help you start working with Corvid:

You may want to check out the Wix Marketplace - it’s a hub where you can look for Corvid (and other) experts for hire.