Dropdown connected by code, looking to add a corresponding image to each item

Ask the community
, ,
1

My dropdown is connected by code to save the selection when a save but is clicked. The entries for the dropdown were written in manage dropdown choices not in the collection field.

Can i create a field key and add images to the field for corresponding images to be shown with the dropdown options?

I have viewed this code from Roi but cannot quite see how it would work for my case

export function dropDown1_change(event, $w) {
const indexOfItem = event.target.selectedIndex;
$w(‘#dataset6’).getItems(indexOfItem,1)
.then((results)=> {
let yourItem = results.items;
$w(‘#imageOfBread’).src = yourItem.imageOfBread;
$w(‘#textOfPriceOfBread’).text = yourItem.price;
});
}

image of bread was a previous example for image that i suppose stored in collection associated with dropDown1

Thanks
Adam

2

Hi Adam,

There is at least one issue with the above code that you copied and pasted, and probably two.

  1. The line where it defines the yourItem object needs to specify that it’s the first item of the array with the index of 0

  2. If you have a dropdown1 element on your page and click the plus icon next to the onChange event on the property sheet, you will, by default, get an all lowercase function name. The code above has it as drop D own1_change

So the code should look like this:

export function dropdown1_change(event, $w) { 	
    const indexOfItem = event.target.selectedIndex; 	
    $w('#dataset6').getItems(indexOfItem,1)                 	
    .then((results)=> { 		
        let yourItem = results.items[0]; 		
        $w('#imageOfBread').src = yourItem.imageOfBread;
        $w('#textOfPriceOfBread').text = yourItem.price; 	
    }); 
}
3

Thanks Anthony, so where do i store the images so that they show when the dropdown opens and do i store the images under a different field key from dropdown 1?

currently my choices for the dropdown are just written into the the element on the page under dropdown 1 but I can’t quite see how the images are stored or linked

4

@adcatch02 There’s always several ways to do things, but it would make more sense to add a collection to feed the dropdown, with one field storing the dropdown text and another, the image. In fact, that is surely the intent of Roi, the coder.

You may have some other data that relates to the image record, and if so, you would add fields to house that data as well. "Image’ is one of the data types for a collection field. You click in the collection field in the collection editor and link it to one of your uploaded images.