Linking Dropdown Element To Anchors Upon Selection/click

Ask the community
,
1

Hi guys,

Would you say there is a way to link a dropdown element to anchors on a Wix page? I am looking for a way to have this happen upon selection of a dropdown item as opposed to when submit button is pressed, so that I can use this for a vertical navigation on the same page much like an anchor menu but not with so much use of space as an anchor menu. I may still be a bit confused on how these user input fields are meant to be, but this is an application I came up with for it that I do not seem to be able to execute at this time.

Please move this to feature requests section if it is not currently possible.

Thanks!

2

You can subscribe to the onChange event of the Dropdown, or any other input element.

$w("#myElement").onChange( (event) => {
  let target = event.target; // "myElement"
  let newValue = target.value; 
});

You can navigate to an area on the page based on an element using the scrollTo method

3

Beautiful! so for the anchor linking bit, I do something like this for example?

 import wixLocation from 'wix-location';
  // ...  wixLocation.to("/MY-WEBPAGE-URL#anchor6");

But how do I exactly mix these two bits for triggering on-change event that ends up scrolling to a specific anchor? I do still feel stuck in this type of mixing commands :confused:

4

I know this thread is old, but I had this issue today and figured out how to complete having a dropdown element’s items direct to specific anchors on the page. I used the onchange and scrollTo codes. Hope this helps some of you.

1078×271 33.1 KB

5

wow nice but can it go to another page upon change of value

6

Above is correct, but if you are stuck, here is what wasn’t written for us newbies.

I tried and tried on my own and ended up hiring a guy to fix it for me. (Best $50 ever spent).

The key is NOT JUST THE CODE. YOU HAVE TO TELL THE ELEMENT TO ATTACH TO THE FUNCTION IN THE CODE.

That means you have to right click on the ELEMENT (in my case the dropdown element in the editor), click “Properties”, and the properties panel comes up.

Then, in the properties panel, next to “onChange” you have to add the name of the function in the code!!!

In my example, you write dropdown1_change

Press enter.

Now the item is actually attached to the code and it will work!

(just press preview and it will work in preview).

Here is the total code I was using with my dropdown to get it to work.

import wixWindow from ‘wix-window’;
$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”) {
$w(“#vectorImage2”).show();
$w(“#text66”).show();
}
});
export function dropdown1_change(event, $w) {
let dropdownSelIndex = $w(“#dropdown1”).selectedIndex;
console.log(dropdownSelIndex);
if (dropdownSelIndex === 0) {
$w(‘#anchor5’).scrollTo();
return ;
}
if (dropdownSelIndex === 1) {
$w(‘#anchor6’).scrollTo();
return ;
}
if (dropdownSelIndex === 2) {
$w(‘#anchor7’).scrollTo();
return ;
}
if (dropdownSelIndex === 3) {
$w(‘#anchor8’).scrollTo();
return ;
}
if (dropdownSelIndex === 4) {
$w(‘#anchor9’).scrollTo();
return ;
}
if (dropdownSelIndex === 5) {
$w(‘#anchor10’).scrollTo();
return ;
}
if (dropdownSelIndex === 6) {
$w(‘#anchor11’).scrollTo();
return ;
}
if (dropdownSelIndex === 7) {
$w(‘#anchor3’).scrollTo();
return ;
}
}

Hope that helps! Enjoy (until Wix wakes up and makes this functionality built in)

Blessings,

Joshua Brown