【问题标题】:Bootstrap multiselect with dividers带分隔符的引导多选
【发布时间】:2015-06-12 18:19:57
【问题描述】:

我正在尝试使用 Bootstrap 多选,但我需要在元素之间放置分隔线(此条)。这是我到目前为止的标记。我尝试放置是因为我在某处读到您可以使用引导选择执行此操作,但它看起来不适用于引导多选。我最终得到一个复选框,但旁边没有文字。我想要一个简单的条或线来分隔组。

<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

【问题讨论】:

  • jsfiddle.net/1zuj6w7h/1 我看不出您的标记有任何问题,除了 &lt;optgroup&gt; 包含分隔线,因此您在某些选项之间有 2 行。您是否在以下位置使用插件: silviomoreto.github.io/bootstrap-select ?
  • 这是我实际使用的 bootstrap-multiselect.css。它不是来自您提供的链接。我在 jsFiddle 中单击了运行,结果窗格保持为空。
  • 嗯。我不熟悉那个图书馆。你能设置一个 JSFiddle 来更好地代表你的问题吗?目前,我没有发现问题。
  • 我更新了jsfiddle.net/1zuj6w7h/2 你会看到分隔线显示为空白行,只有一个复选框
  • 该文档中没有关于 &lt;option data-divider="true"&gt;&lt;/option&gt;...

标签: twitter-bootstrap bootstrap-multiselect


【解决方案1】:

使用来自http://silviomoreto.github.io/bootstrap-select/ 的库将允许使用&lt;option data-divider="true"&gt;&lt;/option&gt;&lt;optgroup&gt;...&lt;/optgroup&gt; 在选项之间显示条形:

<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 以获取工作示例。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-05-15
    • 2012-09-03
    • 1970-01-01
    • 2014-12-20
    • 1970-01-01
    • 2013-08-13
    • 1970-01-01
    • 2015-05-09
    相关资源
    最近更新 更多