Topic: customizing multiselect

Nikos Skalis free asked 4 years ago

Resources (screenshots, code snippets etc.)


If we consider the example Multiselect with options groups in

Expected behavior

Could you please advise:

  1. how to disable the "Select All" option
  2. how to expand the menu of options, instead of displaying ~5 rows/options to display as many options as the screen permits (when you click on that form field)

Actual behavior

  1. "Select All" is enabled by default with no obvious way to disable it
  2. the menu of options occupies a few pixels (~5 options), not really convenient in case there are many (many) options to select from


Mateusz Łubianka staff answered 4 years ago


Check this code: $('.mdb-select').materialSelect({ visibleOptions: 15 });


nskalis free commented 4 years ago

I am sorry but I am not experienced with jQuery: $(document).ready(function() {<br> $('.mdb-select').materialSelect();<br> $('.select-toggle-all').css("display", "none");<br> $('.mdb-select').materialSelect({ visibleOptions: 15 });<br> }); makes the form placeholder appear twice, I guess mentioning it 2nd time $('.mdb-select').materialSelect breaks it somehow, how I can combine both settings ?

nskalis free commented 4 years ago

solved.. $(document).ready(function() { $('.mdb-select').materialSelect({ visibleOptions: 15 }); $('.select-toggle-all').css("display", "none"); });

Mateusz Łubianka staff commented 4 years ago

Great. I'm glad everything works.

Mateusz Łubianka staff answered 4 years ago


I created the snippet with example. Check out this link:


nskalis free commented 4 years ago

thank you! would you be so kind how to use visibleOptions described here and set it to 15 for example ?

nskalis free answered 4 years ago

thanks. could you please advise a little bit more ?

for example, in case of snippet

who it would like ? preferably without jQuery

Mateusz Łubianka staff answered 4 years ago


The options for the Multiselect are the same as in the Single Select. You can find them here: That's all options at the moment, but we are still developing. If you don't want to use "Select All" option you can add display: none style. For example with jQuery: $('.select-toggle-all').css("display", "none");


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

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.10.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: Yes
  • Provided link: Yes