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