Connect drop down list to images

Ask the community
,
32

1. under the drop down 2 the “getgetUniqueTitles2” should be defined as to map item.sub instead of main, otherwise the two dropdowns will show the same content
Yes you’re right (a stupid copy & paste failure of me sorry).

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("sub", 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.sub);
    return [...new Set(titlesOnly)];
}
 
function buildOptions2(uniqueList) {
    return uniqueList.map(curr => {
        return {label:curr, value:curr};
    });
}
  1. By a maden choice in dropdown1 you enable and fill the dropdown2 with unique items found in —>“main”.
  2. When you make a choice in dropdown2 nothing happens, because the event-handler for dropdown2 is not existing. Ihoped you would be able to add this to your code, because you have already have an example with dropdown1.

Anyway, you will have to add this code part, to get your second dropdown to work…

$w('#dropdown2').onChange(()=>{  here your function, what shall happen now? });