How to create two dependent dropdown list

Ask the community
, ,
4

@nastarck002 you have to create a collection to feed the first dropdown, a second collection to feed the second dropdown. Then you have to code a filter that relates through .value with the second dropdown, something like this:

const firstDropdown = [
    {
        label: 'Permanent Citizen',
        value: 'permaCit',
    },
    {
        label: 'Conditional Permanent Citizen',
        value: 'cPermCit',
    },
    {
        label: 'U.S. Citizen',
        value: 'usCitizen',
    },
]

const secondDropdown = [
    {
        label: 'Apply for U.S. Citizenship',
        value: 'permaCit',
    },
    {
        label: 'Renew my Green Card',
        value: 'permaCit',
    },
    {
        label: 'Remove Conditions on my green card',
        value: 'cPermCit',
    },
    {
        label: 'Get a Certificate of Citizenship',
        value: 'usCitizen',
    },
    {
        label: 'Petition my Relative for a green card',
        value: 'usCitizen',
    },
]

$w.onReady(() => {
    $w('#dropdown1').options = firstDropdown

    $w('#dropdown1').onChange(({ target }) => {
        const filteredDropdown = secondDropdown.filter(
            item => item.value === target.value
        )
        $w('#dropdown2').options = filteredDropdown
    })
})