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

**URL:** <https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930>\
**Category:** Ask the community\
**Tags:** technical-talk, code, wix, question\
**Created:** [February 1, 2024, 4:09am UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930 "2024-02-01T04:09:38Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![user1353](https://avatars.discourse-cdn.com/v4/letter/u/977dab/32.png) [@user1353](https://forum.wixstudio.com/u/user1353)\
**Post date:** [February 1, 2024, 4:09am UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930/1 "2024-02-01T04:09:38Z")

</div>

**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/](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);  
}

**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.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [February 1, 2024, 8:09am UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930/2 "2024-02-01T08:09:06Z")

</div>

**What’s different between these 2 ? ? ?**

{“label”: “Antiguax”, “value”: “[Freepik | Create great designs, faster](https://www.freepik.com/home)”},  
{“label”: “Belize”, “value”: “[https://www.youtube.com](https://www.youtube.com/)”}

---

<div class="post-metadata">

**Author:** ![user1353](https://avatars.discourse-cdn.com/v4/letter/u/977dab/32.png) [@user1353](https://forum.wixstudio.com/u/user1353)\
**Post date:** [February 1, 2024, 3:17pm UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930/3 "2024-02-01T15:17:15Z")

</div>

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

Please note, this still does not work.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [February 1, 2024, 10:29pm UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930/4 "2024-02-01T22:29:10Z")

</div>

> [@user1353](#):
>
> $w.onReady(function () {  
> $w(“#sharedshuttledropdown”).options = [  
> {“label”: “Airportx”, “value”: “[https://www.vitzael.com/”](https://www.vitzael.com/%E2%80%9D)},  
> {“label”: “Belize”, “value”: “[http://www.youtube.com](http://www.youtube.com)”}  
> ];
> 
> });  
> export function dropdown1\_change(event) {  
> let gotoUrl = $w(“#sharedshuttledropdown”).value;  
> wixLocation.to(gotoUrl);  
> }

```javascript
$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);
}

```

---

<div class="post-metadata">

**Author:** ![user1353](https://avatars.discourse-cdn.com/v4/letter/u/977dab/32.png) [@user1353](https://forum.wixstudio.com/u/user1353)\
**Post date:** [February 1, 2024, 11:07pm UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930/5 "2024-02-01T23:07:27Z")

</div>

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.

```javascript
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);
}

```

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [February 1, 2024, 11:26pm UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930/6 "2024-02-01T23:26:52Z")

</div>

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…

```javascript
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;
}

```

![2024-02-02 00_26_37-Wix Website-Editor _ WixWorld](https://us1.discourse-cdn.com/wix/original/3X/7/c/7c725f518ec938e2fa858ea8fea9eca2ea850dff.png)

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

---

<div class="post-metadata">

**Author:** ![user1353](https://avatars.discourse-cdn.com/v4/letter/u/977dab/32.png) [@user1353](https://forum.wixstudio.com/u/user1353)\
**Post date:** [February 1, 2024, 11:36pm UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930/7 "2024-02-01T23:36:45Z")

</div>

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:

 ![Screen Shot 2024-02-01 at 3.37.59 PM](https://us1.discourse-cdn.com/wix/original/3X/9/a/9a33af7edbb7cd58422f9131fcb88592ed0ffffe.jpeg)

---

<div class="post-metadata">

**Author:** ![user1353](https://avatars.discourse-cdn.com/v4/letter/u/977dab/32.png) [@user1353](https://forum.wixstudio.com/u/user1353)\
**Post date:** [February 1, 2024, 11:40pm UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930/8 "2024-02-01T23:40:59Z")

</div>

This worked!

**SOLVED!!!**

```javascript
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!!!

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [February 2, 2024, 12:06am UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930/9 "2024-02-02T00:06:17Z")

</div>

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 !**

---

<div class="post-metadata">

**Author:** ![user1353](https://avatars.discourse-cdn.com/v4/letter/u/977dab/32.png) [@user1353](https://forum.wixstudio.com/u/user1353)\
**Post date:** [February 2, 2024, 3:19am UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930/10 "2024-02-02T03:19:11Z")

</div>

> [@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:

```javascript
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!

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [February 2, 2024, 7:45am UTC](https://forum.wixstudio.com/t/clickable-drop-down-menu-that-takes-the-user-to-a-url-code-provided/55930/11 "2024-02-02T07:45:32Z")

</div>

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

**Good luck and happy coding!**