Dropdown menu with anchor links

Ask the community
,
1

Hi!

1964×786 371 KB

I’m trying to create a dropdown menu that will be used to navigate a specific page. When a visitor clicks an element in the dropdown, the page should auto-scroll to the corresponding anchor link.

This is the code I’m using but it doesn’t seem to be working.

export function dropdownManual2_change(event, $w) {
let dropdownSelIndex = $w( “#dropdownManual2” ).selectedIndex;
console.log(dropdownSelIndex);
if (dropdownSelIndex === 0 ){
$w( “#agegap” ).scrollTo();
return ;
}
if (dropdownSelIndex === 1 ){
$w( “#angsty” ).scrollTo();
return ;
}
if (dropdownSelIndex === 2 ){
$w( “#bdsm” ).scrollTo();
return ;
}
}

Any ideas why?

Thank you!

2

@contact2933 With a preliminary look at your code, it appeared to be fine. I went ahead and test it, and it does work. It occured to me that the onChange function may not be properly “registered” in the property sheet like the following:

3

It really worked for you? Goodness, that’s so odd.

I have it registered as well. Hmmmm…

2484×618 93.8 KB

I notice that in your screenshot the Dataset icon appears next to the Dropdown’s ID name. Did you create a data set?

1368×236 21.5 KB

4

@contact2933 That is a page that I test various things on, and the dropdown is, in fact, tied to a dataset, though I don’t often populate via dataset.

Instead of checking the selectedIndex as your criteria, you could have your test be the dropdown value instead.

5

@tony-brunsman Nevermind!! You were absolutely correct. I thought the ID was registered but turns out the ID name wasn’t matching!! It said “change_1” rather than “change”.

Such a silly mistake! Thank you for helping me find that. Much appreciated!

6

Hi, I have copied your code and still having issues. The dropdown will not move to the anchor location onClick or onChange…Please help

1006×425 32.5 KB

7

Read this post here…

…and you will understand what to do and how to solve your issue.

Surely you have no connections between code and dropdown-element.

8

Hi Anthony,

I couldn’t find the problem with my code. could you take a look?

import wixWindow from ‘wix-window’ ;
$w . onReady ( function () {

});
export function dropdown1_change ( event , $w ) {
let dropdownSelIndex = $w ( “#dropdown1” ). selectedIndex ;
console . log ( dropdownSelIndex );
if ( dropdownSelIndex === 0 ) {
$w ( “#anchor1” ). scrollTo ();
return ;
}
if ( dropdownSelIndex === 1 ) {
$w ( “#anchor2” ). scrollTo ();
return ;
}
if ( dropdownSelIndex === 2 ) {
$w ( “#anchor3” ). scrollTo ();
return ;
}
if ( dropdownSelIndex === 3 ) {
$w ( ‘#anchor4’ ). scrollTo ();
return ;
}
if ( dropdownSelIndex === 4 ) {
$w ( “#anchor5” ). scrollTo ();
return ;
}
if ( dropdownSelIndex === 5 ) {
$w ( “#anchor6” ). scrollTo ();
return ;
}
if ( dropdownSelIndex === 6 ) {
$w ( “#anchor7” ). scrollTo ();
return ;
}
if ( dropdownSelIndex === 7 ) {
$w ( “#anchor8” ). scrollTo ();
return ;
}

}

9

Hi Khem,

So, does anything happen when you choose an item from the dropdown? The code looks fine. I’m wondering what happens if you create an onChange function for the dropdown within the onReady function (and delete the function registered in the property sheet) like the following:

import wixWindow from 'wix-window';
$w.onReady(function () {
    $w("#dropdown1").onChange((event) => {
       let dropdownSelIndex =$w("#dropdown1").selectedIndex;
        console.log(dropdownSelIndex);
        if (dropdownSelIndex === 0) {
            $w("#anchor1").scrollTo();
            return;
        }
        if (dropdownSelIndex === 1) {
            $w("#anchor2").scrollTo();
            return;
        }
        if (dropdownSelIndex === 2) {
            $w("#anchor3").scrollTo();
            return;
        }
        if (dropdownSelIndex === 3) {
            $w('#anchor4').scrollTo();
            return;
        }
        if (dropdownSelIndex === 4) {
            $w("#anchor5").scrollTo();
            return;
        }
        if (dropdownSelIndex === 5) {
            $w("#anchor6").scrollTo();
            return;
        }
        if (dropdownSelIndex === 6) {
            $w("#anchor7").scrollTo();
            return;
        }
        if (dropdownSelIndex === 7) {
            $w("#anchor8").scrollTo();
            return;
        }
    })
});