How to use dropdown menu to jump to other pages?

Discussion Ask a question
,
1

I’m trying to use a dropdown menu as another form of header menu.

So when a visitor clicks on one of the option within the dropdown menu it takes them to another page within the dynamic pages of the site, is this possible?

I have a demo code below that I tried to do…

Could it be that this code doesn’t work on Dynamic Pages?

import wixLocation from 'wix-location';

export function classesDropdown_change() {

	if ($w('#classesDropdown_change').value === 1) {
		wixLocation.to(`Module-01/Module-N03`);
		
		console.log("Going to Class #01");
	}

	if ($w('#classesDropdown_change').value === 2) {
		wixLocation.to(`/Module-01/Teste-seus-Conhecimentos`);
		
		console.log("Going to Class #02");

	}

	if ($w('#classesDropdown_change').value === 3) {
		wixLocation.to(`/Module-01/Use-seu-website-para-atingir-suas-Metas---Dura%C3%A7%C3%A3o%3A-05%3A22`);
		
		console.log("Going to Class #03");
	}
}
2

Hi! Yes, i belive it’s possible
What happens in your case? Code looks good

3

Thanks, but for some reason the code don’t work on the site… It act like nothing happens. I added console.log to see if the code runs but, no messages are show in the Developer Console in preview mode. Is their something I’m missing something.

Could it be that this code doesn’t work on Dynamic Pages?

4

Hi,
Please provide the site URL so we can check it out.

5

Here the link: https://arthosmaciel.wixsite.com/wix-academy/Module-01/Use-seu-website-para-atingir-suas-Metas---Duração%3A-05%3A22

Could the problem be that it’s a dynamic page?

6

Hi,
In order to get the value of the chosen item you need to use:

event.target.value;

check out the event’s API here.

7

I guess something like this?

$w("#classesDropdown_change").onChange( (event, $w) => {
	  let newValue = event.classDropdown.value;

Maybe I’m missing something…

8

Hi Arthosmaciel,
I check your code, you should only have one $w.onReady on your page.
Every manipulation you want to apply on elements should be on that scope.
Looks like this:

$w.onReady(() => {
    	$w("#classesDropdown").onChange((event, $w) => {
            // Your code here...
            });
});

The other option is to add a onChange event in properties menu of the element.
Good luck!

9

Do you know what this is? I think this is the root of the problem…

848×216 11.2 KB

10

Hi,
I checked your site, you have some syntax errors.
You have multiplies $w.onReady and $w(‘#dataset’).onReady. it looks they should be in the same scope.

$w.onReady(() => { // Only one $w.onReady
    $w('#dynamicDataset').onReady(() => {
        // all the relevant code for dynamicDataset
    })
})

It should solve you errors.
Check this out:

Good luck!
Roi

11

Sorry I don’t know where to add that part of the code…

Here the full code:

import wixLocation from "wix-location";

$w.onReady(() => { // Only one $w.onReady
	    $w('#dynamicDataset').onReady(() => {

$w.onReady(() => {
    	$w("#classesDropdown").onChange((event, $w) => {
            let newValue = event.classDropdown.value;

	if ($w('#classesDropdown_change').value === 1) {
		wixLocation.to(`Module-01/Module-N03`);
		
		console.log("Going to Class #01");
	}

	if ($w('#classesDropdown_change').value === 2) {
		wixLocation.to(`/Module-01/Teste-seus-Conhecimentos`);
		
		console.log("Going to Class #02");

	}

	if ($w('#classesDropdown_change').value === 3) {
		wixLocation.to(`/Module-01/Use-seu-website-para-atingir-suas-Metas---Dura%C3%A7%C3%A3o%3A-05%3A22`);
		
		console.log("Going to Class #03");
	}
});
12

Read this, it can be helpful

Try this code:

$w.onReady(() => { // Only one $w.onReady
	$w('#dynamicDataset').onReady(() => {
		$w("#classesDropdown").onChange((event, $w) => {
			let newValue = event.classDropdown.value;
			if ($w("#classesDropdown").value === 1) {
				wixLocation.to(`Module-01/Module-N03`);

				console.log("Going to Class #01");
			}
			if ($w("#classesDropdown").value === 2) {
				wixLocation.to(`/Module-01/Teste-seus-Conhecimentos`);
				console.log("Going to Class #02");
			}
			if ($w("#classesDropdown").value === 3) {
				wixLocation.to(`/Module-01/Use-seu-website-para-atingir-suas-Metas---Dura%C3%A7%C3%A3o%3A-05%3A22`);
				console.log("Going to Class #03");
			}
		});
	});
});

Good luck!
Roi

13

How do I set the “newValue”… It say’s unread

14

This warning means that you do set it, but never use it after that line.

Liran.