Create code to open product page based on user's selection in dropdown

Now on day 3 of trying to figure this out -

I have 2 drop-down boxes on my main page populated from a database query (Drop down #1 is State & Drop down #2 is Lake). the 2nd drop-down is based on what the user selects in the first drop-down box. These 2 drop-downs are working great.

I’ve added a button at the bottom called “Shop Now” which i want to direct the user to based on the specific lake the user selects in the 2nd drop-down. Sounds like it should be an easy thing to do??

Not sure what product this is - just logging into the Wix editor to edit my website

What are you trying to achieve:
[Explain the details of what you are trying to achieve. The more details you provide, the easier it is to understand what you need.]

What have you already tried:
I’ve tried everything I could find on the web regarding trying to get this to work.

Here is my current code that runs my drop-downs and enables the button:

import wixLocation from 'wix-location';
import wixData from 'wix-data';
let filter;
let location;

$w.onReady(function () {

async function initPage() {
    const StateLakes = {};

        .then(results => {
            const stateOptions = => ({ label: state.title, value: state._id }));
            $w('#dropdownstate').options = stateOptions;

    $w('#dropdownstate').onChange(async() => {
        let hasLakes = false;
        const selectedState = $w('#dropdownstate').value;

        if (StateLakes[selectedState]) {
            hasLakes = true;
            $w('#dropdownlake').options = StateLakes[selectedState];
        } else {
            const results = await wixData.query('LakeDB1')
                .eq('state', selectedState)
			if (results.length > 0) {
				hasLakes = true;
				const lakeOptions = => ({ label: lake.title, value: lake._id }));
				$w('#dropdownlake').options = lakeOptions;
				StateLakes[selectedState] = lakeOptions;

        if (hasLakes) {
            $w('#dropdownlake').selectedIndex = undefined;
        } else {


    $w('#dropdownlake').onChange(() => {


Sounds like an interesting project!

Hopefully we can get you over this hurdle :muscle:

Is this the full code?

At the moment, besides enabling/disabling the button, I’m not seeing a way to redirect users to the specified page when the button is cliecked.

You’ll likely need to add an onClick event for the button along with wix-location-frontend and a little extra code to decide where the button should take users.

$w('#button43').onClick(() => {
	//Code to decide what page to navigate to."/pageUrl")
1 Like