Linking right picture to a dropdown menu

Ask the community
,
1

Hello!

I am new to corvid and was wondering if anybody can help me out. I made a drop down menu that is connected to a database + a picture that is connected to that same database as well.

My problem is I don’t know how to connect both of them together(dropdown menu+picture) so that when a user selects
the item in the menu the right picture show up next to it

I’ve attached a picture for reference.

Thank you in advance!

2

Hi,
first you need to set the values of the dropdown to be the links to the image (either through the code or using dropdown setting).
Then create a dropdown change event that will change the source of the image.
See the code example below:

$w.onReady(function () {
    $w("#dropdown1").options = [
        { "label": "Image 1", "value": "https://res.cloudinary.com/dk2ghb1pg/image/upload/v1535301733/bxoyfrkj4zwtbsewcryf.png" },
        { "label": "Image2", "value": "https://res.cloudinary.com/dk2ghb1pg/image/upload/v1535301733/bxoyfrkj4zwtbsewcryf.png" },
    ];
});

export function dropdown1_change(event) {
 let img = event.target.value
    wixLocation.to(lk);
 $w('#image').src = img;
}

You can set the values to be taken from the database collection (using data binding connect the values of the dropdown to the relevant database field), set them through code as in the example above or thought the dropdown settings.