Connect drop down list to images

Ask the community
,
10

@imagine62303
Normaly i am not here to give every-one a ready2go-solution.
I give ideas, which should be worked out by you.

If you need more help, show me first your current state.
-What do you have right now?

  • How looks like your current code?
  • How looks like your current project-structure?
  • What did you change already, what did you add and so on.

I can not see what you are doing.

You said that your list and your images are on the same dynamic page.
When you talking about “list”, you mean surely the “DropDown”.

Did you do all this steps?

here is the way you should go to solve your issue…

  1. Create a second dataset (NOT-DYNAMIC) and connect it with your data(base). where you have stored all your images (related) to the dropdown.
  1. Now you have the situation which you can work with. How it will work?

Now you can use the index of the DropDown to select the right image in your DATABASE (which should have the same identic index).

  1. CODE: You could use → getItems(x,x)-command

This example shows you how your code should look like.

$w.onReady(function () {
    $w('#HereYourDropdownId').onChange(()=>{

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

        $w("#HereYourDatasetIdH").getItems(selectedIndex, 1)
        .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('#HereYourImageId').src = items.img //img=the reference-id of your column where you store all your images

        } )
})

Here you should change the ID of the dataset to your own used dataset-ID.

$w('#HereYourDropdownId')

For example…

$w('#dataset1')

If your NON-DYNAMIC-DATASET has the ID —> “dataset1”

$w.onReady(function () {
 //starts an action when changing DropDown
    $w('#dropdown1').onChange(()=>{
 //sets the value of a variable to the selected index of of your DropDown
 let selectedIndex = $w("#dropdown1").selectedIndex
 //getting the right item from DATABASE by using the DATASET (this should normaly select just ONE-ITEM ---> the curret selected one)
        $w("#dataset1").getItems(selectedIndex, 1)
 //now some results will be returned back
        .then( (result) => {
 // pulling all results into variable [items]
 let items = result.items;
 //counting the number of results ---> should be ---> 1
 let totalCount = result.totalCount;
 // here you can see all RESULTS in your console --> look on bottom of the screen in PREVIEW-MODE
            console.log(items)
            console.log(items[0].title)
            console.log(totalCount)
 // here you set the source of the IMAGE ---> img = column-id whre you store your images!
            $w('#image1').src = items.img //img=the reference-id of your column where you store all your images
        })  
    })
})

If you do not understand the code, you won’t be able to get all this to work.

EDIT:
and here some information about the used command (getItems)…