Bootstrap multiselect with dividers

Question

I'm trying to use the Bootstrap multiselect but I need to place dividers (this bars) between the elements. Here is the markup that I have so far. I tried placing because I read somewhere that you can do this with the bootstrap select but it does not look like it works with the bootstrap multiselect. I end up getting a checkbox but with no text next to it. I would like a simple bar or line to separate the groups.

<select id="team_filter_1" class="col-md-9" multiple="multiple">
<option value="studio_1" data-type="studio">All Eidos-Montréal</option>
<optgroup label="Games">
    <option value="game_0" data-type="game">All Games</option>
    <option value="game_1" data-type="game">DX:MD</option>
    <option  data-divider="true"></option>
    <option value="game_1_scenario_2" data-type="game">DX:MD - Sc.1_March</option>
    <option value="game_1_scenario_3" data-type="game">DX:MD - Sc.2_Sept</option>
    <option value="game_2" data-type="game">DX:NG2</option>
    <option value="game_3" data-type="game">DX:LIVE</option>
    <option value="game_4" data-type="game">TRXMTL</option>
</optgroup>
<option data-divider="true"></option>
<optgroup label="Support departments">
    <option value="department_8" data-type="support">Cinematics</option>
    <option value="department_9" data-type="support">Marketing</option>
</optgroup>
<option data-divider="true"></option>
<optgroup label="G&A departments">
    <option value="department_1" data-type="ga">HR</option>
    <option value="department_2" data-type="ga">Finance</option>
    <option value="department_3" data-type="ga">IT</option>
    <option value="department_4" data-type="ga">Admin</option>
</optgroup>
<option data-divider="true"></option>
<optgroup label="Other departments">
    <option value="department_5" data-type="other">Global HR</option>
    <option value="department_6" data-type="other">Global IT</option>
    <option value="department_7" data-type="other">QA</option>
</optgroup>

I use this jQuery script to activate it:

$("select[id*='team_filter']").multiselect({
        nonSelectedText: 'All',
        numberDisplayed: 1,
        nSelectedText: 'selected',
        allSelectedText: 'All'
    });

I'm using https://github.com/davidstutz/bootstrap-multiselect

Answer 1

Using the library from http://silviomoreto.github.io/bootstrap-select/ will allow the use of <option data-divider="true"></option> or <optgroup>...</optgroup> for displaying bars between options:

<select id="team_filter_1" class="selectpicker" multiple="multiple">
    <option value="studio_1" data-type="studio">All Eidos-Montréal</option>
    <optgroup label="Games">
        <option value="game_0" data-type="game">All Games</option>
        <option value="game_1" data-type="game">DX:MD</option>
        <option  data-divider="true"></option>
        <option value="game_1_scenario_2" data-type="game">DX:MD - Sc.1_March</option>
        <option value="game_1_scenario_3" data-type="game">DX:MD - Sc.2_Sept</option>
        <option value="game_2" data-type="game">DX:NG2</option>
        <option value="game_3" data-type="game">DX:LIVE</option>
        <option value="game_4" data-type="game">TRXMTL</option>
    </optgroup>
    <optgroup label="Support departments">
        <option value="department_8" data-type="support">Cinematics</option>
        <option value="department_9" data-type="support">Marketing</option>
    </optgroup>
    <optgroup label="G&A departments">
        <option value="department_1" data-type="ga">HR</option>
        <option value="department_2" data-type="ga">Finance</option>
        <option value="department_3" data-type="ga">IT</option>
        <option value="department_4" data-type="ga">Admin</option>
    </optgroup>
    <optgroup label="Other departments">
        <option value="department_5" data-type="other">Global HR</option>
        <option value="department_6" data-type="other">Global IT</option>
        <option value="department_7" data-type="other">QA</option>
    </optgroup>
</select>

See this JSFiddle for a working example.