Hi All,
I am in need of a drop down design with multiple value selection.
Is there is anyway in WIX, we can create a drop down box with multiple value selection?
Quick response are highly appreciated.
Regards,
Harish
Hi Harish,
Welcome to Wix Code
This forum is specialised in Wix Code product.
We don’t have this type of element at this moment.
Roi
Thanks Roi
Hi did you get this done? i need the same thing i have figured out how to do it with 1 value return using a different label in drop down with the help of wixshow.com but need to now have 2 3 and 4 values returned by selecting one drop down.
can anyone recommend where to add the 2nd 3rd and 4th values?
// PAGE CODE
import {populateDropdownWithFilter,populateDropdown} from ‘backend/utilitiesModule’;
$w.onReady(async function () {
//WORKING WITH DROPDOWNS
$w(“#myDropdown”).options = await populateDropdownWithFilter(“DemoData”,“categoryName”,“Fruit”, “price”);
});
export function myDropdown_change(event) {
console.log($w(“#myDropdown”).value);
}
// BACKEND CODE
// Filename: backend/utilitiesModule.jsw (web modules need to have a .jsw extension)
import wixData from ‘wix-data’;
export function populateDropdown(collectionName, valueField) {
let allItems = [];
return wixData.query(collectionName)
.ascending(“title”)
.find()
.then((results) => {
if (results.totalCount > 0) {
let items = results.items;
items.forEach((item) => {
let oneItem = {
label: item.title,
value: item[valueField].toString()
}
allItems.push(oneItem);
})
return allItems;
}
return null;
})
}
Maybe this example will help:
Multi-Select Dropdown
Create a dropdown menu with checkboxes and search a database using multiple filters.
Hi, Thanks for the response but i can’t see how that will work for me.
What i need is to add more field values from the database to the code i have written here upon the selection of one single drop down.
@Yisrael(Wix)
Thank you for the reference - I almost have enough information to complete my dropdown menu that allows multiple boxes to be checked.
I have added a container box with the text field and “fake” dropdown arrow.
My questions are:
How do I add the repeated selections?
How do i prompt the arrow to display those selections when clicked?
Thanks!
Update:
I figured out how to add the repeaters (AKA the dropdown selections)
Furthermore…I figured out how to hide the repeaters from the page.
I’m still stuck trying to figure out how to:
-make repeat selections appear underneath the container box when the vector image (down arrow) is clicked.
I don’t know much about Code…but I can enable Corvid and place things where they need to go.
Thanks in advance for any tips!
export function continents_mouseOut(event) {
$w(“#continents”).collapse();
}
To give the project a more professional look, you must add this code to re- the expansion