Make dropdown clickable and link to different page

Ask the community
,
1

Hello! I am trying to make it so each option on my dropdown menu links to a different page but I have not had much luck so far and can’t work out what I am doing wrong!

I currently have this code in place:

import wixLocation from 'wix-location';

export function dropdown1_click(event) {
    let url = $w('#dropdown1');
    console.log(url)
    wixLocation.to("/create2");
}

Which sends me straight to the page but I don’t get a chance to quick any option, that happens when I press the dropdown bar to select an option.

Is there any way to make it so that doesn’t happen and I get to actually choose an option?

And then be able to set it up so that the 5 options I have all go to different pages instead of just the one option?

I have linked it to a dataset and just set the values to 1, 2, 3, 4 and 5 and with the title being the actual words I want showing on the dropdown list.

Any help is appreciated! I have been stuck on this for longer than I would like to admit!

2

If you want to navigate to a url dynamically you need to access the .value property of the dropdown element. Try the following:

$w("#dropdown1").onChange((e) => {
    wixLocation.to(e.target.value)
}

I am assuming that the url for the page you want to navigate to is stored on the value property of the dropdown (I.E. if you want to navigate to www.yoururl.com/contact the value stored would just be contact)

If you want to navigate to a dynamic page then you just need to change the wixLocation to the following:

wixLocation.to(`prefix/${e.target.value}`)

Introduction - Velo API Reference - Wix.com
value - Velo API Reference - Wix.com

3 
import wixLocation from 'wix-location';

let myUrl=[];
    myUrl[0]="https://www.google.com";
    myUrl[1]="https://www.wix.com/velo/forum";

$w.onReady(()=> {
    let options =[
        {label: "Google.com", value: myUrl[0]},
        {label: "Velo-Forum", value: myUrl[1]},
    ]

    $w('#dropdown1').options = options;

    $w('#dropdown1').onChange((event)=>{
        wixLocation.to($w('#dropdown1').value);
    });    
});
4

Ahhhhh! Thank you both so much!! This has sorted my problem completely!! :grin: