Clickable Drop down menu that takes the user to a URL / Code provided

[user1353]

Question:
What is wrong with my code? When I select an item from the list nothing happens. The URL does not load.

I have a dropdown list and the id is correct. I see the labels in the dropdown on the frontend, but when I select an option, the URL does not load.

CODE

import wixLocation from ‘wix-location’;
$w.onReady(function () {
$w(“#sharedshuttledropdown”).options = [
{“label”: “Airportx”, “value”: “https://www.vitzael.com/”},
{“label”: “Belize”, “value”: “http://www.youtube.com”}
];

});
export function dropdown1_change(event) {
let gotoUrl = $w(“#sharedshuttledropdown”).value;
wixLocation.to(gotoUrl);
}

Product:
[Wix Editor, Wix Studio Editor.]

What are you trying to achieve:
When an option is selected from the list, the associated URL should load.

What have you already tried:
I have tried checking for errors and moving the export function section, but nothing works.

Additional information:
None.

[CODE-NINJA]

What’s different between these 2 ? ? ?

{“label”: “Antiguax”, “value”: “Freepik | Create great designs, faster”},
{“label”: “Belize”, “value”: “https://www.youtube.com”}

[user1353]

For some reason the URL was replaced when I pasted the code. I fixed my original post.

Please note, this still does not work.

[CODE-NINJA]

@user1353

$w.onReady(function () {
$w(“#sharedshuttledropdown”).options = [
{“label”: “Airportx”, “value”: “https://www.vitzael.com/”},
{“label”: “Belize”, “value”: “http://www.youtube.com”}
];

});
export function dropdown1_change(event) {
let gotoUrl = $w(“#sharedshuttledropdown”).value;
wixLocation.to(gotoUrl);
}

$w.onReady(function () {
$w(“#sharedshuttledropdown”).options = [
{“label”: “Airportx”, “value”: “https://www.vitzael.com/”},
{“label”: “Belize”, “value”: “[http://www.youtube.com](http://www.youtube.com/)”}
];

});
export function dropdown1_change(event) {
let gotoUrl = $w(“#sharedshuttledropdown”).value;
wixLocation.to(gotoUrl);
}

[user1353]

Hello.

Thanks for that. I really appreciate it.

I have pasted the complete code below with your edits. Now the labels do not show in the dropdown. The dropdown is broken.

import wixLocation from 'wix-location';
$w.onReady(function () {
$w(“#sharedshuttledropdown”).options = [
{“label”: “Airportx”, “value”: “https://www.vitzael.com/”},
{“label”: “Belize”, “value”: “[http://www.youtube.com](http://www.youtube.com/)”}
];

});
export function dropdown1_change(event) {
let gotoUrl = $w(“#sharedshuttledropdown”).value;
wixLocation.to(gotoUrl);
}

[CODE-NINJA]

Ok, this was not the code i wanted to provide, actually.
Something must have been gone wrong.

But anyway, my first question:
How many DROP-DOWN-ELEMENTS are involved in your issue?

As i can see, you are working with 2x-Dropdowns ? ? ?
a) —> sharedshuttledropdown
b) —> dropdown1

But in your description —> I have a dropdown list and the id is correct.

So, how many dropdowns do we have here?

Can you make a pic of your Propdown-Setup, so i can imagine your setup a little bit better?

Let’s say you have just one DropDown…

import wixLocation from 'wix-location';

$w.onReady(()=> {
	$w('#dropdown1').options = loadDropDown();
	
	$w('#dropdown1').onChange((event)=>{
		console.log(event.target.id);
		console.log($w('#dropdown1').label);
		console.log($w('#dropdown1').value);
		//-------------------------------------
		let url = $w('#dropdown1').value;
		wixLocation.to(url);
	});

});

function loadDropDown() {
	let options = [
		{label: 'Airportx', value: 'https://www.vitzael.com'},
		{label: 'Belize', value: 'https://www.youtube.com'}
	];
	return options;
}

And maybe you want to take a look onto a very old example-site…
https://russian-dima.wixsite.com/meinewebsite/website-navigation

[user1353]

Sorry. Just 1.

#sharedshuttledropdown

I think I forgot to change dropdown1_change to sharedshuttledropdown_change, but that won’t fix it.

Is this what you need? Same code, just different label values:

[user1353]

This worked!

SOLVED!!!

import wixLocation from 'wix-location';

$w.onReady(()=> {
	$w('#dropdown1').options = loadDropDown();
	
	$w('#dropdown1').onChange((event)=>{
		console.log(event.target.id);
		console.log($w('#dropdown1').label);
		console.log($w('#dropdown1').value);
		//-------------------------------------
		let url = $w('#dropdown1').value;
		wixLocation.to(url);
	});

});

function loadDropDown() {
	let options = [
		{label: 'Airportx', value: 'https://www.vitzael.com'},
		{label: 'Belize', value: 'https://www.youtube.com'}
	];
	return options;
}

Thank you so much!!!

[CODE-NINJA]

You found your solution?
You know what was wrong?
You want to mark it as SOLUTION?

But what was wrong?

possibility-1: → you used the wrong DropDown-ID
possibility-2: → since you used an EXPORT-FUNCTION for triggering your dropdown-events → maybe the connection inside of your PROPERTY-PANEL → got lost?

This is why i always tell → NOT <— to use EXPORT Event-Trigger-Functions !!!

Good luck and happy coding !

[user1353]

@CODE-NINJA

possibility-2: → since you used an EXPORT-FUNCTION for triggering your dropdown-events → maybe the connection inside of your PROPERTY-PANEL → got lost?

This is why i always tell → NOT <— to use EXPORT Event-Trigger-Functions !!!

I think this was the issue:

possibility-2: → since you used an EXPORT-FUNCTION for triggering your dropdown-events → maybe the connection inside of your PROPERTY-PANEL → got lost?

This is why i always tell → NOT <— to use EXPORT Event-Trigger-Functions !!!

I am new to Wix. Wix is interesting. Good to know!

Thanks again!

[CODE-NINJA]

You found your SOLUTION ???
Mark the post which was the solution for you.

Good luck and happy coding!