Connect drop down list to images

Ask the community
,
27

Hi Dima,

Found your thread talking about dropdown linking the image at the same page. Super helpful! But I meet a problem to combine your code to the conditional dropdowns code (learned from the other thread). I let the first dropdown filter out duplicates in one fieldkey to create a list, and then the second dropdown will be triggered to show the other fieldkey corresponding to first fieldkey selected. The last step is using your code to show the options under the second dropdown.

However, it seems the image shows is not following the list be created by the first dropdown. Feeling I might miss something in the code to let images follow the list of reduced duplicates. Here is the code I got:


import wixData from 'wix-data';


$w.onReady(function () {
    uniqueDropDown1();
});


function uniqueDropDown1 (){

    wixData.query('test')

        .limit(1000)
      .find()
      .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
           $w("#dropdown1").options = buildOptions(uniqueTitles);
      });


 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.main);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}


export function dropDown1_change(event, $w) {
uniqueDropDown2();
$w("#dropdown2").enable();
}


function uniqueDropDown2 (){

    wixData.query('test')

        .contains("main", $w("#dropdown1").value)
        .limit(1000)
      .find()
      .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
           $w("#dropdown2").options = buildOptions(uniqueTitles);
      });

 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.sub);
 return [...new Set(titlesOnly)];
    }

 function buildOptions(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
    })
});

I also attach the screenshot of the dataset:

1896×542 56.6 KB

Being a beginner at coding. Do appreciate it if you could help with this case. Thanks!