How to create two dependent dropdown list

Ask the community
, ,
1

Hello, I want to create two dropdown lists exactly like the one in citizenpath dot com/uscis-forms
Clicking the second dropdown list will bring another text boxes with links that can redirect one to another page. Can this be done with Wix editor or Wix Velo.

2

Yes, you can do it, you will just have to have all the data you need somewhere to retrieve with the value of the first dropdown as a filter.

3

Can you pls put me through it. I want it to look exactly like https://citizenpath dot com/uscis-forms

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