Linking Dropdown items to a URL using Wix Studio

[momi1959]

I’m having trouble with
I wrote a script to allow button dropdown items to link to URL and it works fine (https://www.littlecrabastrology.com/copyhome). On another page I created the exact same scrip modifying the ID associated with the dropdown button (see https://www.littlecrabastrology.com/little-crab-book-3 - MEDIA button). However this one does not work. See scripts below. Any help will be greatly appreciated.

Working in
Wix Studio Editor, Wix Editor

Site link
If this is happening on a site, include a live or test site link

What I’m trying to do
Linking Dropdown items to a URL using Wix Studio

What I’ve tried so far

Script (not working):
// Velo API Reference: Velo Docs

import wixLocation from ‘wix-location’;
$w.onReady(function () {

$w("#media").options = [
    { "label": "PRESS RELEASE", "value": "https://www.npr.org" },
    { "label": "SELL SHEET", "value": "https://www.espn.com" }
];

});
export function media_change(event) {
let gotoURl = $w(“media”).value;
wixLocation.to(gotoURl);
}

Script works

// Velo API Reference: Velo Docs

import wixLocation from ‘wix-location’;
$w.onReady(function () {

$w("#purchasebks1").options = [

    { "label": "New! Direct Ordering - Book 1", "value": "https://shop.ingramspark.com/b/084?p3t4JgKn1oY5j9g4WpoyJzX2IT0R4Ku3iaNBL4CCbVA" },
    { "label": "New! Direct Ordering - Book 2", "value": "https://shop.ingramspark.com/b/084?Ce6gDIz6S2OtKIBDYw40akJkWdL58fpcgBdBEO2wZXu" }
    //{ "label": "Amazon", "value": "https://www.amazon.com/dp/B0C2JFPKWG?binding=hardcover&ref=dbs_m_mng_rwt_sft_thcv_tkin" }
];

});

export function purchasebks1_change(event) {
let gotoURl = $w(“#purchasebks1”).value;
wixLocation.to(gotoURl);
}

Extra context
Anything else that might help - edge cases, screenshots, etc.

[Ecom_swift_LLC]

Found it, it’s a typo in the event handler. In the not-working script you wrote:

let gotoURl = $w(“media”).value;

but the element selector is missing the # prefix. It needs to match the same selector you used to set the options, media, not the bare ID name. Compare with your working script, which correctly uses $w(“#purchasebks1”) in both the onReady block and the change handler.

Fix: change that line to

let gotoURl = $w(“media”).value;

Without the #, $w() can’t find the element, so gotoURl ends up undefined and wixLocation.to() has nothing to navigate to, which is why nothing happens when you pick an option.

If this helped, please mark it as Solved.

[momi1959]

Thank you for your quick response. The ID tag is correct in the Studio listing. Somehow, when I copied the script to this post, the # dropped and I did not notice it. Below is the script from Studio. Thanks

// Velo API Reference: Velo Docs

import wixLocation from ‘wix-location’;
$w.onReady(function () {

$w("#media").options = [
    { "label": "PRESS RELEASE", "value": "https://www.npr.org" },
    { "label": "SELL SHEET", "value": "https://www.espn.com" }
];

});
export function media_change(event) {
let gotoURl = $w(“media”).value;
wixLocation.to(gotoURl);
}

Apparently the hash mark does not render when I paste to the post . See screenshot of the listing.

[Ecom_swift_LLC]

Glad that cleared it up, makes sense it was just a copy-paste slip. If this helped, please mark it as Solved.

[Ecom_swift_LLC]

Ah, that explains it, the forum editor stripping the # is a common gotcha here. Glad it’s sorted now.

[momi1959]

Unfortunately it is still not working. Instead of cut/paste I am sending screen shots.

I am at a loss as why this is not working.

Thanks

[Ecom_swift_LLC]

Good catch on the hash mark, thanks for sending screenshots instead, that confirms the code itself is right on both sides.

Since the script matches the working one structurally, the usual cause left is that the onChange event isn’t actually wired up for media in the Editor, even though the function name matches. Typing “export function media_change” in the code panel doesn’t bind it by itself. Velo only calls it if the dropdown’s Properties panel (click the element, then the lightning bolt/Events icon) shows onChange set to media_change.

Quick way to confirm: add console.log(“fired”) as the very first line inside media_change, then open the site in Preview, open the browser console, and pick an option from the dropdown. If nothing logs, the handler isn’t attached, go back to Properties > Events on media and set onChange to media_change from the dropdown list there (not just the typed function name). If it does log but nothing navigates, the options array likely isn’t the one being read and we’d look at that next.

If this helped, please mark it as Solved.

[momi1959]

@Ecom_swift_LLC

ince the script matches the working one structurally, the usual cause left is that the onChange event isn’t actually wired up for media in the Editor, even though the function name matches. Typing “export function media_change” in the code panel doesn’t bind it by itself. Velo only calls it if the dropdown’s Properties panel (click the element, then the lightning bolt/Events icon) shows onChange set to media_change.

Quick way to confirm: add console.log(“fired”) as the very first line inside media_change, then open the site in Preview, open the browser console, and pick an option from the dropdown. If nothing logs, the handler isn’t attached, go back to Properties > Events on media and set onChange to media_change from the dropdown list there (not just the typed function name). If it does log but nothing navigates, the options array likely isn’t the one being read and we’d look at that next.

If this helped, please mark it as Solved.

Thank you so much for your assistance. It is indeed the onChange not set to media_change. I’ll mark it solved.

[Ecom_swift_LLC]

Hello @momi1959,

Glad the onChange was the missing piece. Thanks for marking it solved, and good luck with the rest of the site.