Hey! Qué tal? En este video, aprenderás como crear una lista desplegable en CASCADA en Wix usando un poco de Velo Code. No olvides subscribirte y comentar alguna pregunta!
CODIGO
import wixData from 'wix-data'; $w.onReady(function () { initPage(); }); async function initPage() { const countryStates = {}; //base de datos temporal //query a countries wixData .query("Countries") .ascending("title") .find() .then((results) => { const countryOptions = results.items.map((country) => ({ label: country.title, value: country._id, })); $w("#countryDropdown").options = countryOptions; }); //se ejecuta cuando selecciono una option del dropdown countries $w("#countryDropdown").onChange(async (ev) => { const selectedCountry = $w("#countryDropdown").value; let hasStates = false; if (countryStates[selectedCountry]) { hasStates = true; $w("#stateDropdown").options = countryStates[selectedCountry]; } else { //query a la base de datos estados const results = await wixData .query("States") .eq("country", selectedCountry) .ascending("title") .find(); if (results.length > 0) { hasStates = true; const stateOptions = results.items.map((state) => ({ label: state.title, value: state._id, })); $w("#stateDropdown").options = stateOptions; countryStates[selectedCountry] = stateOptions; } } if(hasStates){ $w("#stateDropdown").selectedIndex = undefined; $w("#stateDropdown").expand(); $w("#searchButton").disable(); }else{ $w("#stateDropdown").collapse(); $w("#searchButton").enable(); } }) }
Gracias por ver el vídeo!