Topic: material select not working with all options selected
root-nine priority asked 6 years ago
Start your code here<form method="post" id="options-form"> <select multiple="" searchable="Search..." class="mdb-select colorful-select dropdown-secondary" id="SelectedOptions" name="SelectedOptions"> <option value="" disabled="">Please select</option> <option value="option_value_0">Option 0</option> <option value="option_value_1">Option 1</option> <option value="option_value_2">Option 2</option> <option value="option_value_3">Option 3</option> <option value="option_value_4">Option 4</option> <option value="option_value_5">Option 5</option> </select> <button class="btn-save btn btn-flat btn-md" title="Apply">Apply</button> <div class="mt-4"> <button type="submit" class="btn btn-primary waves-effect waves-light">Save</button> </div> </form> <script type="text/javascript"> $(document).ready(function () { $("#options-form .mdb-select").materialSelect(); }); </script>
root-nine priority answered 6 years ago
- The labels "Select all" and "x options selected" should be configurable in order to provide multi language support.
- It should be possible to completely disable (hide) the toggle all checkbox (independent from the multiple attribute)
Sebastian Kaczmarek staff commented 6 years ago
Glad I could help. Thanks for the suggestions, we'll consider that in the next releases. Adding to the "Ideas" list. Regards, SebastianSebastian Kaczmarek staff answered 6 years ago
Thank you for the detailed description of the problem. I have managed to find the answer to your issue.
So the problem is in our code. There is a bug there. We have already addressed that but it will be released with the next version. For now, you have to fix it on your own. Here is the solution:
In the material-select.js
file, there is the class called MaterialSelect
. Please find the _onToggleAllClick()
method and remove the following line:
this.$nativeSelect.val(this.valuesSelected);
It should be on the 498
line in the file. You will have to recompile the MDB package again to have it done.
The second temporary solution is to edit the mdb.js
file directly and remove the exact same line from there. Then, you have to minify the file again to have this change in your mdb.min.js
file.
Please note that this solution is temporary and will be included in the next release so you won't have to bother with that anymore.
Kind regards,
Sebastian
root-nine priority answered 6 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No
Sebastian Kaczmarek staff commented 6 years ago
Hello there, It works all fine when I use `FormData` or `$.serializeArray()` on the form object. Could you please provide me with more details? Does the problem occur on all browsers? And most important- how do you handle the `submit` event? Regards, Sebastian