I Need To Fill a Cascading Dropdown Dynamically

Ask the community
,
1

So I want the client to first choose a US state, then a US city and when they click the “select” button they are routed to a dynamic page specific to their selection.

The code below found and copied from the Wix cascade example has errors. I need help with the correct scripting - Thanks!

import {
usStates, canadaStates
}
from ‘public/states’;

$w.onReady(function () {
$w(‘#state’).options = usStates;
$w(‘#country’).onChange(() => {
if ($w(‘#country’).value === ‘United States’) {
$w(‘#state’).options = usStates;
$w(‘#state’).placeholder = ‘Select a State’;
$w(‘#state’).enable();
} else if ($w(‘#country’).value === ‘Canada’) {
$w(‘#state’).options = canadaStates;
$w(‘#state’).placeholder = ‘Select a Province’;
$w(‘#state’).enable();
} else {
$w(‘#state’).value = ‘’;
$w(‘#state’).disable();
}
});
});

965×753 157 KB

2

Hi johnkpace this link might help you out https://www.wix.com/code/home/example/Cascading-Form

3

Hi Geo - I have copied they exact code from the link example several times and still get the same error message as before. Is there a online source to help debug code for errors?

1170×372 66.6 KB

4

Hi,
By the screenshot above, it looks like you didn’t change the id’s of the examples to the id’s on your page.
The first this you want to do is to change it to the right id’s.
Check out this reference:

Please update us in your progress.
Roi

5

I’m at a total loss on this - I’ve tried changing the id’s to state and city (which are already loaded in the manage items - both US states and US cities) I keep getting errors- I know nothing about JavaScript, I’ve spent time online trying to figure this out, but most references are HTML. It’s like trying to teach a blind man how to swing a bat at a baseball he can’t see - haha - Don’t know -

911×716 64.8 KB

6

Hopeing you firgured this out by now. If you notice under the “Page code” drop down of the wix page, you have to go to the Public folder and setup a public.js folder for usStates. You need to copy that section of code into the public/usStates folder on the right, create a usStates.js file and then run the code.

7

The example is actually pretty horrible as it does not set up any information on where information is coming from for the code

8

That is where the cascading form example falls short in explaining for newbies. Is there example of how to set up public.js folders…as in the cascadng form usStates…what code is being created for this. It would go along way to helping explain by showing the example fully out as to code and the public code(s) associated with it

9

Thank you. I’ve been trying this for ages! It feels so good to get conditional logic working! Thank you so much