Wix Conditional Unique dropdown boxes

Question

I have 2 dropdown boxes State and Lake. I want the user to be able to select the state and only the lakes that are applicable are shown in the 2nd dropdown box. The state dropdown works; however, the 2nd dropdown still shows all lakes in the database?

import wixData from 'wix-data';

$w.onReady(function () {
    uniqueDropDown1();
});

function uniqueDropDown1 (){
    wixData.query("Import791")
        .limit(1000) 
      .find()
      .then(results => {
           const uniqueTitles = getUniqueTitles(results.items); 
           $w("#stateDropdown").options = buildOptions(uniqueTitles); 
      });
  function getUniqueTitles(items) {
        const titlesOnly = items.map(item => item.state);
     return [...new Set(titlesOnly)];
    }
    function buildOptions(uniqueList) { 
        return uniqueList.map(curr => {
            return {label:curr, value:curr}; 
        });
    }
 }
 export function dropdown1_change(event) {
uniqueDropDown2(); 
 $w("#lakeDropdown").enable();
function uniqueDropDown2 (){
    wixData.query("Import791")
        .contains("state", $w("#stateDropdown").value)
        .limit(1000) 
      .find()
      .then(results => {
           const uniqueTitles = getUniqueTitles(results.items); 
           $w("#lakeDropdown").options = buildOptions(uniqueTitles);
      });

  function getUniqueTitles(items) {
        const titlesOnly = items.map(item => item.lakeName);
     return [...new Set(titlesOnly)];
    }
    function buildOptions(uniqueList) { 
        return uniqueList.map(curr => {
            return {label:curr, value:curr}; 
        });
    }
}
}

Anyone know where I'm going wrong?

Answer 1

Ok, here's my unlazy answer (my IDs might be a bit different than yours, so you might need to adjust that):

import wixData from 'wix-data';

$w.onReady(function () {
    $w('#stateDropdown').options = [];
    $w('#lakeDropdown').options = [];

    $w('#stateDropdown').onChange((event) => {
        populateLakeData(event.target.value);
    });

    populateStateData();

});

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

function populateLakeData(state) {
    wixData.query("StateLakes")
        .limit(1000)
        .eq("state", state)
        .find()
        .then(results => {
            const uniqueTitles = getUniqueItems(results.items, "lake");
            $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 };
    });
}