Showing select all checkbox in bootstrap-multiselect and customize the "None Selected" Text

Question

I am looking for a solution for changing the None selected label into own text.

I have this code, html:

<select id="mySelect" multiple="multiple">          
    <optgroup label="MODERN" value="MODERN">
        <option value="paintings">FAMES</option>
        <option value="works on paper">WORKS</option>
        <option value="prints">LIFE</option>
        <option value="sculptures">TIME</option>
        <option value="design">DESIRE</option>
        <option value="photography">FUTURE</option>
    </optgroup>
</select>
<select id="mySelect2" multiple="multiple">         
    <optgroup label="TREND" value="TREND">
        <option value="paintings">FAMES</option>
        <option value="works on paper">WORKS</option>
        <option value="prints">LIFE</option>
        <option value="sculptures">TIME</option>
        <option value="design">DESIRE</option>
        <option value="photography">FUTURE</option>
    </optgroup>
</select>

js:

$(function () {
    $('#mySelect').multiselect({
        enableClickableOptGroups: true
    });
    $('#mySelect2').multiselect({
        enableClickableOptGroups: true
    });
});

I would like to make the 'None selected' text into MODERN and at the same time, I want the select all option to be included in the checkbox.

Anyone can give me some idea on how to do this?

Answer 1

Hi If you want to have select all checkbox for the this control, then you can use below code. You can use nonSelectedText property to change "None Selected" text

$(function () {
$('#mySelect').multiselect({
    enableClickableOptGroups: true,
    includeSelectAllOption:true,
    nonSelectedText: 'MODERN'
});
$('#mySelect2').multiselect({
    enableClickableOptGroups: true
    includeSelectAllOption:true
});

});