Connect drop down list to images

Ask the community
,
20

Ok, then look here at this code. It’s a very simple one.
What you will need to reconstruct?

  1. 1x dropdown
  2. 1x image
  3. 1x-Dataset for the MATERIAL-LIST (“dataset1”)
  4. 1x DATABASE called “Materials”, where you store all the materials and it’s names.
  5. “dataset1” connected to your “Materials”-Database .
  6. “dropdown1” connected with “dataset1” ( read&write )

Reference-Field (“title”): —> Material-Names
Reference-Field (“image”): —> related images

$w.onReady(function () {
    wixData.query("Materials").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('#dropdown1').onChange(()=>{
        $w('#image1').src=myResults[$w('#dropdown1').selectedIndex].image
    })
});

And here a little example 4-you…
https://www.media-junkie.com/image-list