I would like to have a dropdown menu show a corresponding image from a gallery when selected. The dropdown and gallery are connected to a dataset to populate.
I found some helpful threads on the forum , with someone suggesting this code to pull it off:
export function dropdown6_change(event, $w) { const dropselec = event.target.selectedIndex; let item = $w(‘#gallery1’).items; const imgItem = item[dropselec];
$w(‘#gallery1’).items[imgItem];
console.log(imgItem.src);
}
However, it locks the dropdown menu so that you cannot select anything. But the gallery displays an image corresponding with what is shown in the dropdown. Now when you navigate forward in the gallery and the image changes, the dropdown changes to the corresponding choice.
So basically it is working backwards from how I need it to function. Menu should choose image, not image should choose menu option.
I suggest you to add two dataset to the page, one that will be connected to the dropdown (for this example let’s call it dataset1) and the other to the gallery (dataset2).
Add an onChange() event and add this code: export async function dropdown_change(event) {
const value = $w(‘#dropdown’).value;
const filter = wixData.filter().eq(’ ./write the match field from the database/ ‘, value)
$w(’#dataset1’).setFilter(filter) await $w(‘#dataset1’).refresh()
}
*In the Query() function compare between value variable and the field from the database that the gallery connect to.