How to customize value to Select All option in multiselect?

In order to change the current behavior, you need to modify the MaterialSelect._onToggleAllClick() method which you can find in the material-select.js file located in your MDB Pro package and then recompile and re-minify the bundle.

Hi, thanks for the tip. But the function you have mention has a very complex structure. Can you tell me more exactly, what I should change?

ANothe Problem with Multiselect. It looks like the search functionality doesn't work in IE11.

I know, you don't support IE, but we need it. Do you have an idea, where we chozld search for the solution (what function etc.)?

Probably you could provide the solution for that

Please, why my question ist not answered?

But sometimes we need insted of getting a very long array of values, just value="ALL"

You can simply add one line of code at the bottom of the mentioned function, like this:

  this.$nativeSelect.data('stop-refresh', true);
  this.$nativeSelect.get(0).value = 'all'; // <----- this one
  this._triggerChangeOnNativeSelect();
  this.$nativeSelect.removeData('stop-refresh');

But keep in mind that this way, you will need to access this value like this:

const value = $('#select').get(0).value;

because jQuery.val() function always returns an array in this case and it cannot be changed.

It looks like the search functionality doesn't work in IE11.

It's hard to say without any error messages. Do you have any console errors?

Please, why my question ist not answered?

I am really sorry for inconveniences. We have so much work to do that I have overlooked the notification about your answers

Hi, thanks for replay. I will try your solution and will give a feedback, if it is working

For your question abour IE11: yes, I have an error in theconsole log, which appears on every character entering in search field: SCRIPT438: Das Objekt unterstützt die Eigenschaft oder Methode "includes" nicht mdb.min.js (1,268823)

Hello,

unforunatelly your solution (for select all value) doesn't work. I changed mdb.js like you said and added linethis.$nativeSelect.get(0).value = 'ALL'; // <----- this one

and call the test function onclick on the button

function doTest() {
        let value = $('#idSelect').get(0).value;
        console.log(value);
    }

In console (after selecting all) I see: empty line

This solution is actualy not good anyway even if it would work. Cause I don't know if the user will select one, many or all values. And it is not good, that I need different functions to read value depends on what user has selected.I think, the better was would be to provide more convinient way to do so. I suggest that you change your multiselect template to be able understand, that to do, if user selects all options. It is possible to add extra attribute into tag, e.g.

<select allOptionsValue="ALL" class="mdb-select md-form colorful-select dropdown-primary" multiple  searchable="Search here..">

Please take my suggestion as change request for the next release, if possible.Thanks

IE 11 issues:

it doesnt help to change

//  to fix problem with IE11
 // if (liValue.includes(searchValue.toLowerCase())) {
      if (liValue.indexOf(searchValue.toLowerCase())) {
...

I still have search not working (even now without errors in the console if I enter the characters) and on every click on any option I have error:

   Das Objekt unterstützt diese Aktion nicht.
 mdb.min.js (1,264499)

Hi,

another issue with your suggestion to change includes -> indexOf

after I did it, search functionality in multiselect is not working

About the suggestion to add an extra attribute to the multiselect. I don't like to say that, but most likely we will not add such a feature because it's a corner case. Current behavior allows you to achieve a similar behavior without adding an extra attribute. You can just compare the number of all <option>s in the select: $('#my-select').find('option').length, with the number of all selected options: $('#my-select').find('option:selected').length. If those are equal, you can set your variable to the desired value: var value = 'ALL';. So there is no need for adding an extra attribute to the select.

About the IE problem. I'm surprised that IE 11 does not support .indexOf() (which returns an index or -1 so you should compare against -1 to determine if there is such a value or not btw). AFAIK only IE <9 does not support it. Anyway, try to replace it with jQuery.inArray(), like so:

if ($.inArray(searchValue.toLowerCase(), liValue.split('')) !== -1) {}

Hi,

about selection=all: yes, your idea (just to compare number of selected options with number of available options) sounds reasonable for me, thanks. I will do that.

About IE11 problem, this method throws no errors, but searching is still not working.

I know, that you officially don't support IE11, but you probably should mention, that many corporate users still have IE11 as a standard browser. Probably it would be also good for you, if you would support full functionality for IE11.

Thanks, hope you will try to find a solution for IE11

Hi, cause you already answered about main question in the topic. I would suggest, that I create IE 11 multiselect compability problems as a new topic and close this one. Regards