I need a drop down box that members can check off multiple skills they have in one shot when they register. (check off boxes) The drop down box i have now only allows them to select one skill.
Can wix provide a multi checkoff type drop down box? If so, how do I add this feature?
Thx
I also need a multi drop down box for selecting multiple items.
You should build it yourself:
Add a box to the page.
Put the desired check-boxes in the box
Make the box collapsed by default
Expand the box once the user clicks a button.
Add a container box.
I’m going to provide steps to recreate a solution that I’ve come up with. you can change names later on of course.
Add a input field for the user’s name
It doesn’t matter what the id is.
Add a check box group inside of the container box.
Make the container box id “dropdownBox”
Make the check box group id “checkboxGroup1”
Add a button that will will perform the dropdown action.
And make the id “addSkillsButton”
Add a submit button
Name it whatever you like
You should end up with something like this.
Now create the databases
Create one called “Registrants”, adding two more fields:
“Name” - Text datatype
“Skills” - Tags datatype
Create another database called “Skills”, adding one more field:
“Skill” and make the datatype text.
Add a new dataset to the page.
-Connection to Registrants
-Write-only
Make the necessary connections from the name input, checkbox group, and submit button.
Open the Code editor and paste this in there.
import wixData from ‘wix-data’;
$w.onReady(() => {
wixData.query(‘Skills’)
.find()
.then(res => {
let options = [{“value”: ‘’, ‘label’: ‘Skill’}];
options.push(…res.items.map(category => {
return {‘value’: category.skill, ‘label’: category.skill};
}));
$w(‘#checkboxGroup1’).options = options;
})
});
export function addSkillsButton_click(event) {
if ($w(“#dropdownBox”).collapsed) {
$w(“#dropdownBox”).expand()
.then( () => {
$w(‘#dropdownBox’).show(‘roll’)
} );
} else {
$w(“#dropdownBox”).hide(‘roll’)
.then (() => {
$w('#dropdownBox').collapse();
});
}
}
I tried to implement this. However when i publish test site then whole container box does not show… any idea why it might be happening?
Noone will be able to give you an answer to your question without seeing your code… but wait i will try to do it right now, one moment…
lol
for this you will need to add an embid element that is having custom javascript, its not easy way but more profissional.
