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?

`I want the select all option to be included in the checkbox.`? where are check-boxes come from? — Alive to die - Anant, May 08 '17 at 06:13

score 1 · Accepted Answer · answered May 08 '17 at 06:20

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
});

});

answered May 08 '17 at 06:20

Kiran B

683
10
21

This solved my issue. I added includeSelectAllOption:true, nonSelectedText: and removed Optgroups. – user7978803 May 08 '17 at 08:32
Good to know that it solved your problem. But please re-phrase your question better so that others also can benefit from this thread. For eg you haven't mentioned which is the plugin that you have used. May be you can edit the title also. – Kiran B May 08 '17 at 08:37

score 0 · Answer 2 · answered May 08 '17 at 06:21

In your HTML

<select id="mySelect" multiple="multiple">          
    <optgroup label="MODERN" value="MODERN" stat="0">
        <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" stat="0">
        <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>

In your JS

$(document).on('click','optgroup',function()
{
    if($(this).attr('stat') == "0")
    {
        $(this).children().attr("selected", "selected");
        $(this).attr('stat', "1");
    }
    else
    {
        $(this).children().attr("selected", false);
        $(this).attr('stat', "0");
    }
});

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

2 Answers2