Dropdown with different label and value

Ask the community
,
1

Does someone have an idea on how one would provide a drop down to users that contains collection data, displaying the label using one field, and the value using another field in said collection? Example:

AgencyID = ABCD0001
AgencyName = John Doe Enterprises

The dropdown would display the AgencyName to the end user, but insert the AgencyID, associated with the AgencyName in that row, to the collection.

Much appreciated!

Dan P.

2

Hi Dan,

This article explains how to do it.

3

Thanks Sharon! This is close, but not quite what I’m looking for. Mostly because of this statement at the bottom:


What this tells me is if I’m using an alternate collection to list values from, the label and value will both need to be the same through the UI. I’m currently pulling the value for the drop downs using an array to grab unique values in field AgencyId:

wixData.query("Agency") 
	.limit(1000)        
	.ascending("agencyId") 
	.find() 
	.then(results => { 
	  	const uniqueAgencies = getUniqueAgencies(results.items); 
	  	$w("#dropdown2").options = buildOptions(uniqueAgencies); 
	}); 

function getUniqueAgencies(items) {     
		const agencyIDOnly = items.map(item => item.agencyId);    
   		return [...new Set(agencyIDOnly)]; 
} 

function buildOptions(uniqueList) {    
	return uniqueList.map(curr => { 
		return {label:curr, value:curr};   
	}); 
}

But rather than grabbing the agencyId field as the label and value, I’m looking to pull the Agency.name field associated with the agencyId field and display the name as the label, opposed to the agencyId which is much less informational to the end user.

I feel like I’m close, but I just don’t know enough about Javascripting to get past the hurdle.

Thanks!

Dan P.

4

Hey Dan,

You problem stems from your losing the name field when you create your unique list of IDs.

There are a few ways to go about solving this. I suggest getting a list of unique IDs without losing their corresponding names. To do something similar, I’ve used this post in the past: Removing Duplicate Objects From An Array By Property Name In Javascript - I Like Kill Nerds. I think that should do the trick for you as well.

5

Hi Dan! I was wondering if you found a solution for this? :smiley:

6

Hi @dan-p ,

Would you be willing to share your final code so it would be possible to see the way it is implemented?
Cheers!

7

I had the same problem - the solution is to dynamically populate the drop-down on page load

wixData . query ( “myCollection” )
. find ()
. then (( results ) => {
if ( results . items . length > 0 ) {
let options = $w ( “#dropdown1” ). options ;
results . items . forEach (( $item , itemData , index ) => {
options . push ({ “label” : $item . myLabel , “value” : $item . myValue });
});
$w ( “#dropdown1” ). options = options ;
}
})
. catch (( err ) => {
console . log ( err );
});