Topic: select Custom content box with button in the select box

Coenie Janse van Rensburg priority asked 1 year ago

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


Mateusz Lazaru staff answered 1 year ago


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(){

This is what you need:

const mySelect = new mdb.Select(selectEl);
closeBtn.addEventListener("click", function(){

Working snippet:

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • 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