Connect drop down list to images

Ask the community
,
30

@laughingjesuit
Here try this one…


import wixData from 'wix-data';

var myDatabase = 'test'

$w.onReady(function () {console.log("CODE-START")
    uniqueDropDown1(); 
    $w('#dropdown1').onChange(()=>{
        $w("#dropdown2").enable();
        setTimeout(()=>{
            let dd1Value = $w("#dropdown1").value
            uniqueDropDown2(dd1Value);
        },100)
    })
});

//--------- Drop-Down-1 --------------------------
function uniqueDropDown1 (){console.log("Build unique DropDown-1")
    wixData.query(myDatabase)
    .limit(1000)
    .find()
    .then((res1)=>{
        let items1 = res1.items
        const uniqueTitles1 = getUniqueTitles1(items1);     
        let ddOptions1 = buildOptions1(uniqueTitles1);      
        console.log(uniqueTitles1)
        console.log(ddOptions1)
        $w("#dropdown1").options = ddOptions1;
    });
}
 
function getUniqueTitles1(items) {
    const titlesOnly = items.map(item => item.main);
    return [...new Set(titlesOnly)];
}
 
function buildOptions1(uniqueList) {
       return uniqueList.map(curr => {
       return {label:curr, value:curr};
    });
}

//--------- Drop-Down-2 --------------------------
function uniqueDropDown2(dd1Value){console.log("Build unique DropDown-2")
    wixData.query(myDatabase)
    .limit(1000)
    .contains("main", dd1Value)
    .find()
    .then((res2)=>{
        let items2 = res2.items
        console.log(items2);
        const uniqueTitles2 = getUniqueTitles2(items2);     
        let ddOptions2 = buildOptions2(uniqueTitles2);      
        console.log(uniqueTitles2)
        console.log(ddOptions2)
        $w("#dropdown2").options = ddOptions2;
    });
}
 
function getUniqueTitles2(items2) {
 const titlesOnly = items2.map(item => item.main);
    return [...new Set(titlesOnly)];
}
 
function buildOptions2(uniqueList) {
    return uniqueList.map(curr => {
        return {label:curr, value:curr};
    });
}