Topic: Material Select schows wrong selected options
pwfraley pro asked 6 years ago
Start your code here<selectclass="mdb-select"multiple> <optionvalue=""disabled>Produkte</option> <optionvalue="1">Obst</option> <optionvalue="2"selected>Gemüse</option> <optionvalue="3">Eier</option> </select> <label>Produkte</label>
Jakub Strebeyko staff answered 6 years ago
Hi,
Next release ships big changes in CSS, meaningful changes in syntax and performance. To answer your question straight-forward I'd have to ask you to be a little bit more specific or, best, provide an example on codepen or JSfiddle. The documented feedback is used to constantly make MDB better, one step at the time.
With Best Regards,
Kuba
Jakub Strebeyko staff answered 6 years ago
Hi there pwfraley,
Thanks for reaching out! Fixing the very issue you describe is part of the upcoming MDB 4.5 release, which should be out within a month. Until then, though, there are workarounds. Three steps to undertake in the mdb.js
file:
1. Find options.find('li:not(.optgroup)').each(function (i) {
(line 18944
depending on your compilation). There, swap the if (multiple) ... $newSelect.val($(this).text())}
with the following:
if (multiple) { $(‘input[type=”checkbox”]’, this).prop(‘checked’, (i, v) => { return!v }) if (searchable) { if(optgroup) { selected=toggleEntryFromArray(valuesSelected, $(this).index() -$(this).prevAll(‘.optgroup’).length-1, $select) } else { selected=toggleEntryFromArray(valuesSelected, $(this).index() -1, $select) } } else if(optgroup) { selected=toggleEntryFromArray(valuesSelected, $(this).index() -$(this).prevAll(‘.optgroup’).length, $select) } else { selected=toggleEntryFromArray(valuesSelected, $(this).index(), $select) } $newSelect.trigger(‘focus’) } else { options.find(‘li’).removeClass(‘active’) $(this).toggleClass(‘active’) $newSelect.val($(this).text()) }
2. Add this bit before the found options.fint('li:not...
part:
// Check for optgroups
var optgroup = false
if($select.find(‘optgroup’).length) {
optgroup =true
}
3. Replace line select.siblings(‘ul.dropdown-content’).find(‘li’).eq(entryIndex).toggleClass(‘active’)
(line 19177
) with select.siblings(‘ul.dropdown-content’).find(‘li:not(.optgroup)’).eq(entryIndex).toggleClass(‘active’)
After these adjustments your material multiselect should fly.
Note: careful with characters like ”
,”
,"
,’
and '
! These are OS-dependent - not paying attention while copy/pasting may break your code. Check yourself before you wreck yourself.
Let know whether this fixes helped your case.
With Best Regards,
Kuba
pwfraley pro commented 6 years ago
Thank you for your answer. I guess I will wait then until this version comes out, since I am just starting my project. I alos noticed that the selects and inputs do not line up. Meaning the bottom line on the selects is not at the same height as the bottom line of the inputs, will this also be fixed in the upcoming version?FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No