Topic: select Custom content box with button in the select box
Hi there.
i'm trying to use select with custom button (a close button) so when you click the select it opens and you have all the options to select from, but you are able to select multiple options, then at the bottom you have your close button to close the select box.
But i'm not getting it right with javascript to be able to close the box when i click on the close button.
Also somehow it's creating 2 select boxes, not sure why. (javascript i'm terrible in)
Please see the snippet
https://mdbootstrap.com/snippets/standard/coenie_janse_van_rensburg/4818817
Thanks
Hi!
Most of our components with Select included can be initialized using Javascript OR using HTML Class attribute.
Adding select class to any <select> element will run autoinit and create instance of MDB Select just after page loads. That means, if you will also initialize it manually from JavaScript using new mdb.Select, you will get two instances of the Select component.
To make it simpler - if you want to initialize select using JS, delete the select class from the HTML :)
The close button didn't work because you tried to call close() method for invalid select name - different than you declared.
This is what you've got:
const select = new mdb.Select(selectEl);
closeBtn.addEventListener("click", function(){
mySelect.close()
});
This is what you need:
const mySelect = new mdb.Select(selectEl);
closeBtn.addEventListener("click", function(){
mySelect.close()
});
Working snippet:https://mdbootstrap.com/snippets/standard/mlazaru/4822609#js-tab-view
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: mac
- Browser: chrome
- OS: mac
- Provided sample code: No
- Provided link: Yes