Ok, i did some few UPGRADES on my provided code…
See changes here…
import wixData from 'wix-data';
//-------------------USER-INTERFACE------------------------
const DATABASE = "CARS"; //<-- Paste in here the ID of your DATABASE!
const DB_FIELD1 = "model"; //<-- Paste in here the ID of the Database-Field-1!
const DB_FIELD2 = "type"; //<-- Paste in here the ID of the Database-Field-2!
const ddn1 = "#ddnModel"; //<-- Here the ID of your Dropdown-1.
const ddn2 = "#ddnType"; //<-- Here the ID of your Dropdown-2.
//-------------------USER-INTERFACE------------------------
$w.onReady(async()=>{console.log("Page is ready...");
let itemData = await get_ItemData1();
console.log("Item-Data: ", itemData);
create_UniqueDropdown(itemData, DB_FIELD1, ddn1);
$w(ddn1).onChange(async()=>{
let value = String($w(ddn1).value);
let itemData = await get_ItemData2(value);
create_UniqueDropdown(itemData, DB_FIELD2, ddn2);
console.log("xxx", itemData);
});
$w(ddn2).onChange(async()=>{
let items = await startSearchEngine();
console.log("HURAY --> !!! " + items);
});
});
function get_ItemData1() {
let query = wixData.query(DATABASE)
query.limit(1000)
return query.find()
.then((res)=> {console.log(res);
console.log(res.totalCount)
if (res.totalCount>0) {
let itemData = res.items;
return itemData;
}
else {console.log("No DB-Entries found!");}
}).catch((err)=>{console.log(err);});
}
function get_ItemData2(value) {
return wixData.query(DATABASE)
.limit(1000)
.eq(DB_FIELD1, value)
.find()
.then((res)=> {console.log(res);
console.log(res.totalCount)
if (res.totalCount>0) {
let itemData = res.items;
return itemData;
}
else {console.log("No DB-Entries found!");}
}).catch((err)=>{console.log(err);});
}
function create_UniqueDropdown(items, dbfield, dropdown) {
const uniqueTitles = getUniqueTitles(items);
$w(dropdown).options = buildOptions(uniqueTitles);
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item[dbfield]);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {
label:curr, value:curr
};
});
}
}
function startSearchEngine() {
wixData.query(DATABASE)
.limit(1000)
.contains('departement', String($w(ddn1).value))
.eq("region", String($w(ddn2).value))
.ascending("_random")
.find()
.then((res)=>{console.log("My found RESULTS: ", res);
if (res.totalCount>0) {let items = res.items;
console.log("Items: ", items);
return items;
}
else {console.log("No RESULTS found!!!");}
})
.catch((err)=>{console.log("We have a problem ! ---> " + err);});
}
This CODE has been tested now and is working well.
You can find here a little example…
https://russian-dima.wixsite.com/my-site-4/conditional-dropdowns
Here a SCREENSHOT of the used DATABASE…
Some CONSOLE-LOGS…for better understandings and proovement for the correct working of the code.
USED-SETUP:
//------------------------USER-INTERFACE------------------
const DATABASE = "CARS"; //<-- Paste in here the ID of your DATABASE!
const DB_FIELD1 = "model"; //<-- Paste in here the ID of the Database-Field-1!
const DB_FIELD2 = "type"; //<-- Paste in here the ID of the Database-Field-2!
const ddn1 = "#ddnModel"; //<-- Here the ID of your Dropdown-1.
const ddn2 = "#ddnType"; //<-- Here the ID of your Dropdown-2.
//------------------------USER-INTERFACE-------------------
Result inside dropdowns…



