Question

我试图使用Bootstrap multiselect，但我需要在元素之间放置分隔符（此条）。这是我到目前为止的标记。我试过放置，因为我读到了某个地方你可以用引导程序选择这样做，但它看起来不像它与引导程序multiselect一起工作。我最终得到一个复选框，但旁边没有文字。我想要一个简单的条形或线条来分隔这些组。

<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>

我使用这个jQuery脚本来激活它：

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

我正在使用https://github.com/davidstutz/bootstrap-multiselect

Answer 1

使用http://silviomoreto.github.io/bootstrap-select/中的库，可以使用<option data-divider="true"></option>或<optgroup>...</optgroup>在选项之间显示条形码：

<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>

有关工作示例，请参阅此JSFiddle。

Bootstrap multiselect with dividers

1 个答案: