xxxxxxxxxx1
<div class="container">2
3
<select id="selection1" searchable="Search here..." multiple class="mdb-select md-form colorful-select dropdown-primary">4
<option class="placeholder" disabled selected>No item selected</option> 5
<optgroup label="Group 1">6
<option selected value="1" >Option 1 - preselected</option>7
<option value="2">Option 2</option>8
<option value="3">Option 3</option>9
</optgroup>10
<optgroup label="Group 2">11
<option value="4">Option 4</option>12
<option selected value="5">Option 5 - preselected</option>13
</optgroup>14
<optgroup label="Group 3">15
<option selected value="6">Option 6 - preselected</option>16
<option value="7">Option 7</option>17
<option value="8">Option 8</option>18
</optgroup>19
</select>20
<label for="selection1" class="mdb-main-label">Workaround pre selected</label> 21
22
23
<select id="selection2" searchable="Search here..." multiple class="mdb-select md-form colorful-select dropdown-primary">24
<option class="placeholder" disabled selected>No item selected</option>25
<optgroup label="Group 1">26
<option value="1" >Option 1 - preselected</option>27
<option value="2">Option 2</option>28
<option value="3">Option 3</option>29
</optgroup>30
<optgroup label="Group 2">31
<option value="4">Option 4</option>32
<option value="5">Option 5 - preselected</option>33
</optgroup>34
<optgroup label="Group 3">35
<option value="6">Option 6 - preselected</option>36
<option value="7">Option 7</option>37
<option value="8">Option 8</option>38
</optgroup>39
</select>40
<label for="selection2" class="mdb-main-label">Workaround no selected</label>41
</div>xxxxxxxxxx1
/*2
1. remove data-placeholder attribute3
2. add disabled option (without opt-group) to select with placeholder content (marked with class="placeholder")4
5
3. if you want to remove the "placeholder" if something is selected, use the JS below 6
7
*/xxxxxxxxxx1
$( document ).ready( function () {2
$( '.mdb-select' ).materialSelect(); 3
4
// hide placeholder in dropdown list5
$('.multiple-select-dropdown li.disabled').hide();6
7
// hide placeholder from search results8
$('.search').keyup(function(){9
$('.multiple-select-dropdown li.disabled').hide();10
});11
}); Console errors: 0