Connect drop down list to images

Ask the community
,
14

Hi there, I am revamping this thread to see if someone can provide some help. I have basically an identical situation above, and am typically good at reading between the lines to apply code suggestions to my own site. But for some reason i can no figure it out.

  • My dropdown users would select is “dropdown1” (currently connected to dataset1)

  • My dataset with the list of dropdown options is “dataset1”, and is set to read only, 20 items to display, filter set to “category=walls”

  • My image that users would see change automatically based on the dropdown menu mentioned above is “image3” (not currently connected to any dataset)

  • My dataset with the images to display is “dataset2”, and is set to read/write, 20 items to display, no filters

  • The reference id of the dataset2 column that contains all of the images is “image”

  • I generally have max 12 items (dropdown options and corresponding images to link/display)

  • the code below is a modified version of @russian-dima (thanks for getting me this far!)

Here is a link to the live web page - note, only the upper left hand dropdown (wall material) is currently coded to do anything (all others are placeholders)
www.offhighwayvan .com/interior-design-palettes

right now, i get a message:

Wix code SDK Warning: The src parameter of “image3” that is passed to the src method cannot be set to null or undefined.
If i am not mistaken, I am missing code that links the name of a dropdown item eg “Cement” to the corresponding image of that material in the image column in that data set.

Any help would be incredibly appreciated.

export function dropdown1_change(event) {

 let selectedIndex = $w("#dropdown1").selectedIndex

        $w("#dataset2").getItems(selectedIndex, 12)
        .then( (result) => {
 let items = result.items;
 let totalCount = result.totalCount;
 let offset = result.offset;

 //here your code what should now happen with your image

             $w('#image3').src = items.image //img=the reference-id of your column where you store all your images

        } )
        .catch( (err) => {
 let errMsg = err.message;
 let errCode = err.code;
        });
 
}