Ok, guys! I’ve been searching for how to do this! ANNNNNDDDD… by some stroke of luck, I figured it out without instructions! Devine intervention probably, because I’m not an advanced coder.
Step 1 : Set Up 3 (or more) Dropdowns from User Input Menu
Step 2 : Gather data… My data was coming from an emotions wheel, which I use with clients. The wheel goes from general in the center to more specific as you move outwards. It has 3 different groups of data, which all depend on the selection in the previous group. Here’s the wheel I was working with. The circle at the center was most general (thus dropdown 1) and the next dropdown 2, etc.
Step 2: Data Entry. So, you’re going to enter this data in 3 places.
A. Public File:
My Public Files are called 1.js and 2.js . You can have one file (I have two because I was experimenting.)
Here’s the way I entered the data in the Public file. For continuity’s sake, I’m going to use Surprise > Excited to illustrate throughout these examples (mainly because that’s the emotional experience that I’m having, from figuring this out.)
Here’s how the Public Files are laid out…
Let’s look a bit closer at Surprise!
You must assign a value and label to every piece of data, as you do with the actual dropdown menu and the page code bit too. Each value needs to match in all three place (Public, dropdown, code) for this to work.
export const surprise = [
{value:“”, label: “What kind of surprise?”},
{value:“excited”, label: “Excitement”},
{value:“amazed”, label: “Amazement”},
{value:“startled”, label: “Startle”},
{value:“confused”, label: “Confusion”},
];
Because the value of an unselected box is nothing, you’ll enter it as no value and what you want the text to say as a placeholder.
B. Dropdown List Settings
For the first Dropdown, I put all of the info for the center circle. This is just 6 items.
*** Make sure the value corresponds to the Public File code, for each piece of data!
As you drop down, just put in all possible options for each box! The dropdown lists get longer and longer, because of the increased number of potential selections. All of the selections in the second circle go in the second list and all the ones in the third circle go in the third list. YOU DON’T HAVE TO CREATE SEPERATE DROPDOWNS FOR EACH CATEGORY!!!
C. Page Code
Here’s the code for the transition from 1st to 2nd dropdown menu…
EXAMPLE FROM ABOVE:
import {happy, sad, disgust, anger, fear, surprise} from ‘public/1’;
$w.onReady(function() {
$w(‘#feeling2’).options = happy;
$w(‘#feeling1’).onChange(() => {
if ($w(‘#feeling1’).value === ‘Happy’) {
$w(‘#feeling2’).options = happy;
$w(‘#feeling2’).placeholder = ‘What kind of Happiness?’;
$w(‘#feeling2’).enable();
}
else if ($w(‘#feeling1’).value === ‘Sad’) {
$w(‘#feeling2’).options = sad;
$w(‘#feeling2’).placeholder = ‘What kind of Sadness?’;
$w(‘#feeling2’).enable();
}
else if ($w(‘#feeling1’).value === ‘Anger’) {
$w(‘#feeling2’).options = anger;
$w(‘#feeling2’).placeholder = ‘What kind of Angry?’;
$w(‘#feeling2’).enable();
}
else if ($w(‘#feeling1’).value === ‘Surprise’) {
$w(‘#feeling2’).options = surprise;
$w(‘#feeling2’).placeholder = ‘What kind of Suprised?’;
$w(‘#feeling2’).enable();
}
else if ($w(‘#feeling1’).value === ‘Disgust’) {
$w(‘#feeling2’).options = disgust;
$w(‘#feeling2’).placeholder = ‘What kind of Disgusted?’;
$w(‘#feeling2’).enable();
}
else if ($w(‘#feeling1’).value === ‘Fear’) {
$w(‘#feeling2’).options = fear;
$w(‘#feeling2’).placeholder = ‘What kind of Fear?’;
$w(‘#feeling2’).enable();
}
});
});
The first portion of code is to import the data from the public file to the specific page. Since “1” is the name of my public file, the code is ‘public/1’ . The rest of the code is self-explainitory.
Now… Here’s the code for the transition from 2nd to 3rd dropdown menu…
import {startled, confused, amazed, excited} from ‘public/2’;
$w.onReady(function() {
$w(‘#feeling3’).options = startled;
$w(‘#feeling2’).onChange(() => {
if ($w(‘#feeling2’).value === ‘startled’) {
$w(‘#feeling3’).options = startled;
$w(‘#feeling3’).placeholder = ‘How do you feel Startled?’;
$w(‘#feeling3’).enable();
}
else if ($w(‘#feeling2’).value === ‘confused’) {
$w(‘#feeling3’).options = confused;
$w(‘#feeling3’).placeholder = ‘How do you feel Confused?’;
$w(‘#feeling3’).enable();
}
else if ($w(‘#feeling2’).value === ‘amazed’) {
$w(‘#feeling3’).options = amazed;
$w(‘#feeling3’).placeholder = ‘How do you feel Amazed?’;
$w(‘#feeling3’).enable();
}
else if ($w(‘#feeling2’).value === ‘excited’) {
$w(‘#feeling3’).options = excited;
$w(‘#feeling3’).placeholder = ‘How do you feel Excited?’;
$w(‘#feeling3’).enable();
}
});
});
Step 3: Revel in you dropdown menu masterpiece. Have a cold alcoholic beverage… or a hot one! Who am I to tell you how to revel?
Happy WixCoding, Y’all!
Caty
