Dropdown with separate labels and values

Ask the community
,
1

Hi, I’m very new to Wix and coding. I love to use UI but it limitted on what I want to do. I have dropdown and it’s working but can’t trigger to launch the value when the label selected.

Here is what I have so far.

import wixLocation from ‘wix-location’;
import wixData from ‘wix-data’;

$w.onReady(function () {
})
export function officeDropdown_change(event, $w) {
branchFilter();
}

function branchFilter (){
$w(“#dataset1”).setFilter( wixData.filter()
.eq(“branch”, $w(“#officeDropdown”).value)
);
}

$w.onReady(function () {
$w(“#offices”).onChange((event, $w) => {
console.log(event.target.value);
wixLocation.to(event.target.value);
});
});

This code is working, I just can’t get it point to the field that have the value (url). My .eq(“branch” is where I have my label). I have another field that contians that value. So how do I trigger the value when the label selected. Thanks.

I wish the developer can put “Labels and Values connect to” on two different options under the “Connect Dropdown” this will be awesome.

Thank You in Advance

2

Hi,

$w("#dropDown").onChange( (event, $w) => {
  let newValue = event.target.value;  // now you have the value of the lable selected
  $w("#dataset1").setFilter( wixData.filter()     // here is your code where you can use the selected dropDown value
    .eq("branch", newValue)     
    );  
    });

Link could help : Dropdown - Velo API Reference - Wix.com

P.s: It seems that you have two onReady function in the same page, which is wrong.

Best,
Mustafa

3

Sorry for my slow poke. I’m very new to this.
I have two drop down boxes which “branch” will filter base on officeDropdown selection.
“branch” field from data collection is intended for “label”
“appUrl” field from data collection is intended for “value”

Please look at the code below and let me know what I did wrong. Thanks a lot!

import wixLocation from ‘wix-location’;
import wixData from ‘wix-data’;

export function officeDropdown_change(event, $w) {
branchFilter();
}

function branchFilter (){
$w(“#dataset1”).setFilter( wixData.filter()
.eq(“branch”, $w(“#officeDropdown”).value)
);
}

//Without this code below, the filter works perfectly fine when I select the first dropdown list, it filter base on first selection.
//After second dropdown filter, I would like to know how to launch a new value from the different field which is URLs from the code below.

$w.onReady( function () {
$w(“#dropDown”).onChange((event, $w) => {
let newValue = event.target.value;
$w(“#dataset1”).setFilter( wixData.filter())
.eq(“appUrl”, newValue) //appUrl is a field that would like to set it as Value
console.log(event.target.value);
wixLocation.to(event.target.value);
});
});

Developer Console
TypeError: $w(…).setFilter(…).eq is not a function

4

Please help! Anybody knows how to set a new value on the different field from the Dataset? Thanks