Connect drop down list to images

Ask the community
,
33

Hmm… I’ve added showing image when dropdown2 change but the image order still is not right.

now when selecting apple it shows dog; select banana it shows apple, and choose back dog, nothing will happen.

1570×962 166 KB

1546×886 65.3 KB

1554×894 65.8 KB

Here is my code. (Maybe wrong with the “selectedIndex”? )

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.sub);
 return [...new Set(titlesOnly)];
}
 
function buildOptions2(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
    });
}



var myResults

$w.onReady(function () {
    wixData.query('test').find()
    .then( (results) => {
 if(results.items.length > 0) {
             myResults = results.items
        } else {
 // handle case where no matching items found
        }
    } )
    .catch( (err) => {
 let errorMsg = err;
    } );

    $w('#dropdown2').onChange(()=>{
        $w('#image5').src=myResults[$w('#dropdown2').selectedIndex].image
    })
});