I have a home page where the user selects the State (dropdown#1) and the associated Lake (droopdown#2) then directs them to the repeater page (lake-apparel-showcase) which should show the applicable lake’s products. This page also allows the user to change the State and Lake. It all works until the user decides they want to look at a different State (stateDropdown) and Lake (lakeDropdownd). When the user changes the State, all the lakes in the United States show in the Lake dropdown but it needs to show only applicable lakes associated with state.

How do I get the code to act when the user changes the State? I thought this code already did that via the onChange event? Can anyone help?

import {session} from 'wix-storage';
import wixData from 'wix-data';
let filter = wixData.filter();

$w.onReady(function () {

    
    const selectedstate = session.getItem("statehome");
    $w("#stateDropdown").value = selectedstate;

    const selectedlake = session.getItem("lakehome");
    $w("#lakeDropdown").value = selectedlake;

    $w("#dynamicDataset").setFilter(wixData.filter().eq('state',session.getItem("statehome")));
    $w("#dynamicDataset").setFilter(wixData.filter().eq('lakeName',session.getItem("lakehome")));
    
    $w('#stateDropdown').onChange((event) => {
        populateLakeData(event.target.value);
    });

    $w('#lakeDropdown').onChange((event) => {
        updatelakerepeater()
    });
    populateStateData();

})

function populateStateData() {
    wixData.query("Import791")
        .limit(1000)
        .ascending()
        .find()
        .then(results => {
            const uniqueTitles = getUniqueItems(results.items, "state");
            $w("#stateDropdown").options = buildOptions(uniqueTitles);
        });
}

function populateLakeData(state) {
    wixData.query("Import791")
        .limit(1000)
        .eq("state", state)
        .ascending()
        .find()
        .then(results => {
            const uniqueTitles = getUniqueItems(results.items, "lakeName");
            $w("#lakeDropdown").options = buildOptions(uniqueTitles);
        });
}

function getUniqueItems(items, property) {
    const uniques = items.map(item => item[property]);
    return [...new Set(uniques)];
}

function buildOptions(uniqueList) {
    return uniqueList.map(curr => {
        return { label: curr, value: curr };
    });
}

function updatelakerepeater() {
    $w("#dynamicDataset").setFilter(wixData.filter().eq('state',$w('#stateDropdown').value));
    $w("#dynamicDataset").setFilter(wixData.filter().eq('lakeName',$w('#lakeDropdown').value));
}

Trying to figure out where I went wrong in the code. The onChange event should trigger the lakes to requery; however, it maybe pulling from session still.