How to show all selected options in Multiselect


Topic: How to show all selected options in Multiselect

kennychiu0223 pro asked 6 years ago

Hi, I got a problem when i use the Forms -> multiselect function , the selection have around 50+ options , when selected more than 4 options , the select label will just display "xx options selected" , but i want to show all selected options , any settings for it or other suggestion for me ? Thanks.
<select multiple='multiple' class='mdb-select colorful-select dropdown-primary' name='students[]' id='form_widget_students' data-value='1,2,3,4,5,6,7,8,9,10' searchable='Search here..'>
	<option value='' disabled > --- </option>
	<option  value='1' selected>Student A</option>
	<option  value='2' selected>Student B</option>
	<option  value='3' selected>Student C</option>
	<option  value='4' selected>Student D</option>
	<option  value='4' selected>Student D</option>
	...
	<option  value='50'>Student XX</option>
</select>
mdbootstrap multiselect

Sebastian Kaczmarek staff pro premium answered 6 years ago

To get the list of selected options you can do it in two ways depending on what exactly you want to do.
  1. Bind the change event and use .val() method to get the array of selected values, e.x:
    $('#studentsSelect').on('change', function() {
        var values = $(this).val();
        // do whatever you want with 'values'
    });
    This method gives you an array of values which are set in the options' value attributes.
  2.  In case you want to get the array of values which are visible to the user.  Use this approach:
    $('#studentsSelect').on('change', function() {
        var values = [];
        var $selectedOptions = $(this).find('option:selected');
        $selectedOptions.each(function(){
            values.push($(this).text());
        });
    
        // do whatever you want with 'values'
    });
    This way, you get the array of texts which are set to the options.
So, let's say you have this multiselect (just an example, no classes etc):
<select multiple>
    <option value="student_a">Student A</option>
    <option value="student_b">Student B</option>
    <option value="student_c">Student C</option>
</select>
Then when you will go with the 1. approach, you will get ["student_a", "student_b", "student_c"], 2. approach however, will give you ["Student A", "Student B", "Student C"]. Pick one and do the rest ;)

Sebastian Kaczmarek staff pro premium answered 6 years ago

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

kennychiu0223 pro answered 6 years ago

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 !
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: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.9
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes