select Custom content box with button in the select box


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

Coenie Janse van Rensburg pro premium priority asked 2 years 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

https://mdbootstrap.com/snippets/standard/coenie_janse_van_rensburg/4818817

Thanks


mlazaru staff answered 2 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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