Drop Down Menu

Ask the community
,
1

I am trying to link a drop down menu to a database that when I select a word, it changes the picture. I am looking for a tutorial but since this is basic I cant find. Can someone either guide me through it or point me to a tutorial?

2

Hi,
There’s no option to link a drop down menu to a collection. I’m not fully understand what you would like to achieve. Can you please clarify? Do you have an example to better explain your question?

Thanks,
Tal.

3

Thanks for the reply Tal. I am trying to do 2 things.
#1 When I choose an option of drop down menu, then a picture changes beside the drop down.
#2 I want that selection to be recorded into a database.

For example: pick your favorite 3 colors.

#1 I pick blue and a box beside it changes to color BLUE. When I pick, blue, green and red (in 3 different drop downs) all 3 colors (in form of a picture) appear beside it.
#2 Then those 3 choices are recorded into a database to know which are your favorite colors.

4

So you basically want to have a dropdown user input, and change a picture (or a color in this case) based on the selection of the user:
Settings:

1522×1300 319 KB

Code:

import wixData from 'wix-data';

export function dropdown1_change(event) {
 //getting the value the site visitor have chosen
 let colorSelected = event.target.value; 
 //make sure that the values here are the same as the dropdown
 //elements- check out the image above. 
 const colorsOptions = { red: 'red', yellow: 'yellow', blue: 'blue' };

 switch (colorSelected) {
 case colorsOptions.red:
        $w('#box1').style.backgroundColor = colorsOptions.red;
 break;
 case colorsOptions.blue:
        $w('#box1').style.backgroundColor = colorsOptions.blue;
 break;
 case colorsOptions.yellow:
        $w('#box1').style.backgroundColor = colorsOptions.yellow;
 break;
    }

 //the object you would like to save. Add the relevant 
 //information you wish to save to the collection here. 
 let toInsert = { favoriteColor: colorSelected}; 
 wixData.insert("collectionName", toInsert);

}

If you wish to change an image instead, you should put an image as a placeholder and change it’s src attribute as explained here.

Good luck!
Tal.

5

Tal, I greatly appreciate the help. I was using the colors as an example but what I am really trying to do is change the imagine.

Now, I went to link you provided to understand how to set the SRC. Were in the code do you insert that part? Since colors are default they dont need to be called from a database, but I plan to have 30+ images to call from and I assume I have to link it to a database I create through the SRC.

6

Tal, were do I find the code for each image that I want to use when selecting items from drop down. I found the code and its all great but I am having trouble locating the exact uri of each picture.

7

You should insert it instead of changing the style of the box
( $w(’ #box1 ').style.backgroundColor = colorsOptions.yellow; )

About the image URL- is it image that was uploaded from the media manager / image uploaded elsewhere?

8

Yes its an imagine uploaded into My Media Manager.

9

Tal, here is my issue. I found a way to get the pictures beside the dropdown menu. Please see the code below. But, I have the dropdown connected to a dataset to get the picture, and one of the other features I want to do is save the dropdown’s selection into another Collection. For this reason I have a couple of questions.

export function dropdown1_change(event, $w) {
const indexOfItem = event.target.selectedIndex;
$w(‘#dataset1’).getItems(indexOfItem,1)
.then((results)=> {
let yourItem = results.items;
$w(‘#image18’).src = yourItem[0].logo;
});

1- Can I connect 1 element to 2 different datasets?
2- If the above question is NO, is there another way to get the pictures from Media Manager so that I can use the dropdown selections to save in another collection?

Hope this makes sense. Thanks.

Jose

10

Hi,
1- No you cannot.
2- When you try to set the “src” attribute, it opens the media manager automatically and you can select the relevant image. I recommend following the code example that I gave you above. I’m not sure that the code you wrote above works…

Tal.

11

Hi Tal, I have another question.
1- I added a LogIn button and Profile Button in the header so that it can be seen in all pages. “Log in” works, but when I click “My Profile” it Logs out directly.
2- Also, when I click “My Picks” ( another button I have) it tells my as a users I don’t have permission. The permission for this dynamic page is for all members, but when I logged in as a member it still tells me I don’t have permission.

This is my site - can you help figure out why this 2 things are happening?

https://calvojose0.wixsite.com/mysite

12

Tal, I fixed #1. I had duplicate code in Page and Site that was interfering with each other.

Regarding, question #2, I changed permission settings which stopped giving me the error but know I get the following

I am using the following code to click “My Picks” button to go to this Dynamic Page but it still gives me the error.

export function button22_click(event) {
wixLocation.to(/Weekly/${wixUsers.currentUser.id});
}

843×666 31.8 KB