How to show all selected options in Multiselect

The reason for this is simple. In most use-cases when you select more than 4 options, only the first 4 will be displayed on the select. All the rest will be hidden so users won't be able to see all selected options nor how many of them are selected. They would have to reopen the multiselect and count them manually. So we came up with the solution for this: If you can't see what and how many options are selected, then displaying it that way does not make sense. Instead, the select shows "X options selected" when selected more than 4 options. This way, your users will see all selected options if they select <4 options and if they will select more options than can be fitted onto select, they will at least see how many of them are selected. Getting back to your case. If you have 50 options in your multiselect, and you allow your users to select even all of them, you surely don't want to see something like "Student A, Student B, Student C, ... Student X" on your multiselect for two reasons. First, it won't fit because this string is too long and your users won't see what and how many options are selected. Second, if you would like to make your select display all the selections, it would have to be longer than screen width probably. So as you can see, it doesn't make any sense. Of course, you can have a reason to do it. So if you really have a reason (I mean REALLY), you can modify the code of the Material Select. Please find in the material-select.js file, the method called _setValueToMaterialSelect(). Then, change this condition:

if (itemsCount >= 5) {

  value = `${itemsCount} options selected`;
} else {

  value = value.substring(2);
}

To something like this:

value = value.substring(2);

(simply get rid of the condition and leave only the content of else block). Then you will have to recompile and re-minify the package to have it in your mdb.min.js file. You can also do exact the same thing directly in your mdb.js and then re-minify the file to have it in the mdb.min.js file. Anyway, if I were you, I would consider not to do it at all and leave it as it is. Simply because of UI/UX reasons. But that's only my suggestion. I don't know what exactly are you doing. Hope it helps

---

Hello Sebastian ! Thanks for your suggestion and analysis , i understand your concerns. In my case , i want the system can show all selected student names in real time ( i mean after check/uncheck options) , and the admin user can check easily if the student list is correct / incorrect . Now shows how many options selected (more than 5 options selected) is great, and i also want if any js config to trigger a method and get a selected list after user check / uncheck the options , then show the listing result in other place. Thanks for your help !

---