I need Users to be able to select an item from a dropdown list which will then change the link on a button so that Users are directed to individual external websites for each of the dropdown options.
On my page I've added a dropdown (#dropdown1) and a button (#button11).
I created a dataset (#dataset1) with two columns of information. Column 1 are US States (#Title) and column 2 are corresponding URLs (#webLink) .
Using the properties panel and dev tools I have added this pieces of code to the page:
import wixData from 'wix-data'; import wixLocation from 'wix-location'; export function dropdown1_change(event, $w) { $w("#dataset1").setCurrentItemIndex(event.target.selectedIndex) } export function button11_click(event, $w) { wixLocation.to($w("#title").getCurrentItem().webLink); }
On the front end this results in a User selecting a state from the dropdown (e.g. California) and the link on the button being automatically changed, so it works.
However, when you re-select an item from the dropdown the button link does not change a second time. You need to refresh the page to reset, essentially you get one chance to make a selection at the moment.
Is there a modification to the code I can make to allow the onChange to be repeated and the button link to always be updated with dropdown selection?
Looks like you want to navigate by using a dropdown but would like to trigger it by button click instead triggering it when an item is selected from the dropdown.
I have a tutorial that may help you understand the code.
Link to example intro: https://www.totallycodable.com/example-dropdown-navigation
Link to code examples:
https://www.totallycodable.com/post/use-dropdowns-to-navigate-to-an-external-page-url-text-field-or-dynamic-page-url-link-field
(Look for the query example for text or URL field)
Since you want to trigger by button click, you will have to modify the code examples slightly.
It might be helpful for me to add some screenshots of my set up
Here is my dataset of US States and test URLs
Here is the dev tools view of the implemented code (as an FYI, the URLs value is webLink rather than myURL but I have added per the suggestion above)
On the front end Alabama is first in line and button link is correct
When I select Arizona the button link updates and links out as expected
When I change my dropdown selection to California the button link stays Arizona
This is the same no matter what you select in the dropdown first it gets stuck on that and the only way to resolve is to refresh the page
Any ideas?
Thanks @russian-dima but doesn't seem to have worked. In fact it stopped the previous function working and only allowed the first web link to be shown so I have reverted for now
export function dropdown1_change(event) { let currentIndex = $w('#dropdown1').selectedIndex $w('#dataset1').setCurrentItemIndex(currentIndex) } exportfunction button11_click(event) { let myURL = $w('#dataset1').getCurrentItem().webLink wixLocation.to(myURL) }
Perhaps like this? Not tested.