HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>输入框下拉多选择插件Bootstrap Multiselect - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://libs.itshubao.com/runexample/runexample.min.css" rel="stylesheet"><!--该样式是示例中的运行和代码展示，使用Multiselect无需引入-->
<link href="http://libs.itshubao.com/bootstrap-multiselect/bootstrap-multiselect.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header"><h4>输入框下拉多选择插件 Bootstrap Multiselect</h4></div>
<div class="card-body">
<p>插件使用0.9.15版本，github地址：<a href="https://github.com/davidstutz/bootstrap-multiselect" target="_blank">https://github.com/davidstutz/bootstrap-multiselect</a>，中文文档：<a href="https://www.bootstrap-multiselect.cn/#getting-started" target="_blank">https://www.bootstrap-multiselect.cn/#getting-started</a>。</p>
<div class="form-group">
<select id="example-getting-started" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
<h5><strong>配置选项</strong></h5>
<table class="table table-bordered">
<thead>
<tr>
<th colspan="3"> 总览 </th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#configuration-options-multiple"><code>multiple</code></a></td>
<td><a href="#configuration-options-enableHTML"><code>enableHTML</code></a></td>
<td><a href="#configuration-options-enableClickableOptGroups"><code>enableClickableOptGroups</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-enableCollapsibleOptGroups"><code>enableCollapsibleOptGroups</code></a></td>
<td><a href="#configuration-options-collapseOptGroupsByDefault"><code>collapseOptGroupsByDefault</code></a></td>
<td><a href="#configuration-options-disableIfEmpty"><code>disableIfEmpty</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-dropRight"><code>dropRight</code></a></td>
<td><a href="#configuration-options-dropUp"><code>dropUp</code></a></td>
<td><a href="#configuration-options-maxHeight"><code>maxHeight</code></a></td>
</tr>
<tr><td><a href="#configuration-options-disableIfEmpty"><code>disableIfEmpty</code></a></td>
<td><a href="#configuration-options-disabledText"><code>disabledText</code></a></td>
<td><a href="#configuration-options-onChange"><code>onChange</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-onInitialized"><code>onInitialized</code></a></td>
<td><a href="#configuration-options-onDropdownShow"><code>onDropdownShow</code></a></td>
<td><a href="#configuration-options-onDropdownHide"><code>onDropdownHide</code></a></td>
</tr>
<tr><td><a href="#configuration-options-onDropdownShown"><code>onDropdownShown</code></a></td>
<td><a href="#configuration-options-onDropdownHidden"><code>onDropdownHidden</code></a></td>
<td><a href="#configuration-options-buttonClass"><code>buttonClass</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-inheritClass"><code>inheritClass</code></a></td>
<td><a href="#configuration-options-buttonContainer"><code>buttonContainer</code></a></td>
<td><a href="#configuration-options-buttonWidth"><code>buttonWidth</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-buttonText"><code>buttonText</code></a></td>
<td><a href="#configuration-options-buttonTitle"><code>buttonTitle</code></a></td>
<td><a href="#configuration-options-nonSelectedText"><code>nonSelectedText</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-nSelectedText"><code>nSelectedText</code></a></td>
<td><a href="#configuration-options-allSelectedText"><code>allSelectedText</code></a></td>
<td><a href="#configuration-options-numberDisplayed"><code>numberDisplayed</code></a></td>
</tr>
<tr><td><a href="#configuration-options-delimiterText"><code>delimiterText</code></a></td>
<td><a href="#configuration-options-optionLabel"><code>optionLabel</code></a></td>
<td><a href="#configuration-options-optionClass"><code>optionClass</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-selectedClass"><code>selectedClass</code></a></td>
<td><a href="#configuration-options-includeSelectAllOption"><code>includeSelectAllOption</code></a></td>
<td><a href="#configuration-options-selectAllJustVisible"><code>selectAllJustVisible</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-selectAllText"><code>selectAllText</code></a></td>
<td><a href="#configuration-options-selectAllValue"><code>selectAllValue</code></a></td>
<td><a href="#configuration-options-selectAllName"><code>selectAllName</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-selectAllNumber"><code>selectAllNumber</code></a></td>
<td><a href="#configuration-options-onSelectAll"><code>onSelectAll</code></a></td>
<td><a href="#configuration-options-onDeselectAll"><code>onDeselectAll</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-enableFiltering"><code>enableFiltering</code></a></td>
<td><a href="#configuration-options-enableCaseInsensitiveFiltering"><code>enableCaseInsensitiveFiltering</code></a></td>
<td><a href="#configuration-options-enableFullValueFiltering"><code>enableFullValueFiltering</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-filterBehavior"><code>filterBehavior</code></a></td>
<td><a href="#configuration-options-filterPlaceholder"><code>filterPlaceholder</code></a></td>
<td><a href="#configuration-options-includeResetOption"><code>includeResetOption</code></a></td>
</tr>
<tr>
<td><a href="#configuration-options-includeResetDivider"><code>includeResetDivider</code></a></td>
<td><a href="#configuration-options-resetText"><code>resetText</code></a></td>
<td></td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<tbody>
<tr>
<td width="30%"><code id="configuration-options-multiple">multiple</code></td>
<td>
<p><code>multiple</code> 不是真正的配置选项。它指的是应用插件的 <code>multiple</code>属性<code>select</code>。存在的<code>multiple</code> 属性时 <code>select</code> 插件将使用复选框来允许多个选择。如果不存在，则插件使用单选按钮允许单选。当使用插件进行单选时（不存在<code>multiple</code> 属性），如果事先未选择其他选项，则将自动选择第一个选项。有关如何避免这种行为的信息，请参见 <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a> for how to avoid this behavior. </p>
<p>以下示例显示了 <code>multiple</code> 省略属性时的默认行为： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-single">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-single">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-single').multiselect();</code></pre>
</div>
<p>如果预先选择了多个选项而<code>select</code> 缺少该<code>multiple</code> 属性，<code>selected</code>则插件将首先选择标记为的最后一个选项。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-single-selected">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<!-- Option 3 will be selected in advance ... -->
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-single-selected">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<!-- Option 3 will be selected in advance ... -->
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-single-selected').multiselect();</code></pre>
</div>
<p>以下示例显示了<code>multiple</code> 存在属性时的默认行为。最初选择的选项将自动采用： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-multiple-selected" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<!-- Option 3 will be selected in advance ... -->
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-multiple-selected" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<!-- Option 3 will be selected in advance ... -->
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-multiple-selected').multiselect();</code></pre>
</div>
<p>该插件自然支持<code>optgroup</code>，但是默认情况下无法点击组标题。有关 <code>enableClickableOptGroups</code> 详细信息，请参见该选项。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-multiple-optgroups">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-multiple-optgroups">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-multiple-optgroups').multiselect();</code></pre>
</div>
<p>请注意，采用的类 <code>optgroup</code>，可以轻松选择单个<code>optgroup</code>（检查创建的标记以注意区别！）： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-multiple-optgroups-classes" multiple="multiple">
<optgroup label="Group 1" class="group-1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2" class="group-2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-multiple-optgroups-classes" multiple="multiple">
<optgroup label="Group 1" class="group-1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2" class="group-2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-multiple-optgroups-classes').multiselect();</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-enableHTML">enableHTML</code></td>
<td>
<p>XSS注入对所有现代Web应用程序都是严重的威胁。设置<code>enableHTML</code> 为 <code>false</code>（默认设置）将创建XSS安全多选。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-xss" multiple="multiple">
<option value="1"><script>alert(1);</script></option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-xss" multiple="multiple">
<option value="1">&lt;script&gt;alert(1);&lt;/script&gt;</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-xss').multiselect();</code></pre>
</div>
<p>在另一方面，当设置<code>enableHTML</code> 到 <code>true</code>，该插件将在支持HTML<code>option</code>s:</p>
<div class="code-window">
<div class="code-preview">
<select id="example-xss-html" multiple="multiple">
<option value="1"><span style="color:red">Option 1</span></option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-xss-html" multiple="multiple">
<option value="1">&gt;span style="color:red"&lt;Option 1&gt;/span&gt;</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-xss-html').multiselect({
nonSelectedText:'<span style="color:red">Option 1</span>',
enableHTML:true
});</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-enableClickableOptGroups">enableClickableOptGroups</code></td>
<td>
<p>如果设置为 <code>true</code>, <code>optgroup</code>则可以单击，从而可以轻松选择属于同一组的多个选项。 </p>
<p class="alert alert-warning"><code>enableClickableOptGroups</code> 在单选模式下（即当 <code>multiple</code>属性不存在时）不可用。 </p>
<p class="alert alert-info"> 使用时 <code>selectedClass</code>，所选类别也将应用于选项组。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableClickableOptGroups" multiple="multiple">
<optgroup label="Group 1"><option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableClickableOptGroups" multiple="multiple">
<optgroup label="Group 1"><option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true
});
</code></pre>
</div>
<p>请注意，此选项还可以与禁用的选项一起使用： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableClickableOptGroups-disabled" multiple="multiple">
<optgroup label="Group 1"><option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1" disabled>Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableClickableOptGroups-disabled" multiple="multiple">
<optgroup label="Group 1"><option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1" disabled>Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableClickableOptGroups-disabled').multiselect({
enableClickableOptGroups: true
});
</code></pre>
</div>
<p>注意行为的<code>onChange</code>变化。每当更改/单击optgroup时，<code>onChange</code>都会使用所有受影响的选项作为第一个参数来触发事件。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableClickableOptGroups-onChange" multiple="multiple">
<optgroup label="Group 1"><option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableClickableOptGroups-onChange" multiple="multiple">
<optgroup label="Group 1"><option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableClickableOptGroups-onChange').multiselect({
enableClickableOptGroups: true,
onChange: function(option, checked) {
alert(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
}
});
</code></pre>
</div>
<p>请注意，<code>optgroup</code>如果默认情况下选择了整个组，则会自动选择。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableClickableOptGroups-init" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled="disabled">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableClickableOptGroups-init" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled="disabled">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableClickableOptGroups-init').multiselect({
enableClickableOptGroups: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-enableCollapsibleOptGroups">enableCollapsibleOptGroups</code></td>
<td>
<p>如果设置为<code>true</code>, <code>optgroup</code>则可折叠。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableCollapsibleOptGroups" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableCollapsibleOptGroups" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableCollapsibleOptGroups').multiselect({
enableCollapsibleOptGroups: true
});
</code></pre>
</div>
<p>这两种选择，<code>enableCollapsibleOptGroups</code> 并且 <code>enableClickableOptGroups</code>，也可以结合： </p><p class="alert alert-warning"> 但是请注意，将两个选项组合在一起的行为可能与预期不符-请尝试以下示例，以获取一些直觉。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableCollapsibleOptGroups-enableClickableOptGroups" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableCollapsibleOptGroups-enableClickableOptGroups" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableCollapsibleOptGroups-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true
});
</code></pre>
</div>
<p>可以使用以下简单技巧在默认情况下折叠组： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableCollapsibleOptGroups-collapsed" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableCollapsibleOptGroups-collapsed" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableCollapsibleOptGroups-collapsed').multiselect({
enableCollapsibleOptGroups: true,
buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" class="btn-group" />'
});
$('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
</code></pre>
</div>
<p>将以上与<code>enableFiltering</code> 和结合 <code>includeSelectAllOption</code>: </p>
<p class="alert alert-warning"> 此外，请注意，该行为相结合 <code>enableCollapsibleOptGroups</code>, <code>enableCollapsibleOptGroups</code>, <code>enableFiltering</code> and <code>includeSelectAllOption</code> 不是彻底的测试。尝试以下示例以获得一些直觉。</p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption').multiselect({
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
enableFiltering: true,
includeSelectAllOption: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-collapseOptGroupsByDefault">collapseOptGroupsByDefault</code></td>
<td>
<p><code>optgroup</code>默认情况下，此选项将折叠所有。</p><p class="alert alert-info"><a href="#further-examples">“ 其他示例”</a> 部分中还有一个示例，说明<code>optgroups</code> 默认情况下的另一种折叠方式。</p>
<div class="code-window">
<div class="code-preview">
<select id="example-collapseOptGroupsByDefault" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option></optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option></optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-collapseOptGroupsByDefault" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1" disabled>Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option></optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option></optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-collapseOptGroupsByDefault').multiselect({
enableCollapsibleOptGroups: true,
collapseOptGroupsByDefault: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-disableIfEmpty">disableIfEmpty</code></td>
<td>
<p>如果设置为<code>true</code>，则在未提供任何选项的情况下将禁用多选。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-disableIfEmpty" multiple="multiple"></select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-disableIfEmpty" multiple="multiple"></select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-disableIfEmpty').multiselect({
disableIfEmpty: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-disabledText">disabledText</code></td>
<td>
<p>如果禁用多选，则会显示该文本。请注意，<code>''</code>默认情况下此选项设置为空字符串，<code>nonSelectedText</code> 如果禁用了multiselect并且未选择任何选项，则会显示该选项。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-disabledText" multiple="multiple"></select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-disabledText" multiple="multiple"></select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-disabledText').multiselect({
disableIfEmpty: true,
disabledText: 'Disabled ...'
});
</code></pre>
</div>
<p><code>disabledText</code> 当 <code>select</code> 禁用基础时， 该选项也起作用： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-disabledText-disabled" multiple="multiple" disabled="disabled">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-disabledText-disabled" multiple="multiple" disabled="disabled">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-disabledText-disabled').multiselect({
disabledText: 'Disabled ...'
});
</code></pre>
</div>
<p>请注意，所选选项仍将显示： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-disabledText-disabled-selected" multiple="multiple" disabled="disabled">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html">
<select id="example-disabledText-disabled-selected" multiple="multiple" disabled="disabled">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-disabledText-disabled-selected').multiselect({
disabledText: 'Disabled ...'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-dropRight">dropRight</code></td>
<td>
<p>下拉菜单也可以正确删除。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-dropRight" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-dropRight" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-dropRight').multiselect({
buttonWidth: '400px',
dropRight: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-dropUp">dropUp</code></td>
<td>
<p>下拉菜单也可以删除。请注意，建议同时设置<code>maxHeight</code>。插件会计算下拉菜单的必要高度，并采用计算值和的最小值<code>maxHeight</code>. </p>
<p class="alert alert-warning"> 请注意，此功能已在<a href="https://github.com/davidstutz/bootstrap-multiselect/issues/594">#594</a>引入，并且已知因环境而异。 </p><p class="alert alert-info"><code>dropUp</code> 在 <a href="#further-examples">“ 更多示例”</a>中可以找到在滚动时 自动添加选项的示例。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-dropUp" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option data-role="divider"></option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-dropUp" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option data-role="divider"></option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-dropUp').multiselect({
enableFiltering: true,
includeSelectAllOption: true,
maxHeight: 400,
dropUp: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-maxHeight">maxHeight</code></td>
<td>
<p>下拉菜单的最大高度。当使用带有很多选项的插件时，这很有用。 </p>
<p>左侧的多选使用<code>maxHeight</code> 设置为 <code>200</code>。另一方面，右侧的多重选择不使用<code>maxHeight</code>. </p>
<div class="code-window">
<div class="code-preview">
<select id="example-with-maxHeight" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="9">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
<option value="16">Option 16</option>
<option value="17">Option 17</option>
<option value="18">Option 18</option>
<option value="19">Option 19</option>
<option value="20">Option 20</option>
</select>
<select id="example-without-maxHeight" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="9">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
<option value="16">Option 16</option>
<option value="17">Option 17</option>
<option value="18">Option 18</option>
<option value="19">Option 19</option>
<option value="20">Option 20</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-with-maxHeight" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="9">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
<option value="16">Option 16</option>
<option value="17">Option 17</option>
<option value="18">Option 18</option>
<option value="19">Option 19</option>
<option value="20">Option 20</option>
</select>
<select id="example-without-maxHeight" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="9">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
<option value="16">Option 16</option>
<option value="17">Option 17</option>
<option value="18">Option 18</option>
<option value="19">Option 19</option>
<option value="20">Option 20</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-with-maxHeight').multiselect({
maxHeight: 200
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-checkboxName">checkboxName</code></td>
<td>
<p>用于生成的复选框的名称。有关详细信息，请参见<a href="#post">服务器端处理。</a></p>
<div class="code-window">
<div class="code-preview">
<select id="example-checkboxName" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-checkboxName" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-checkboxName').multiselect({
checkboxName: function(option) {
return 'multiselect[]';
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-onChange">onChange</code></td>
<td>
<p>在选项的更改事件上触发的功能。请注意，使用插件提供的<code>select</code> and <code>deselect</code> 方法选择或取消选择选项时，不会触发事件。 </p>
<p class="alert alert-warning"> 需要注意的是行为<code>onChange</code>改变设置时 <code>enableClickableOptGroups</code> 要 <code>true</code>. </p>
<div class="code-window">
<div class="code-preview">
<select id="example-onChange" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-onChange" multiple="multiple"<
<option value="1"<Option 1</option<
<option value="2"<Option 2</option<
<option value="3"<Option 3</option<
<option value="4"<Option 4</option<
<option value="5"<Option 5</option<
<option value="6"<Option 6</option<
</select<
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-onChange').multiselect({
onChange: function(option, checked, select) {
alert('Changed option ' + $(option).val() + '.');
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-onInitialized">onInitialized</code></td>
<td>
<p>当多选完成初始化时触发的功能。</p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<button id="example-onInitialized-button" class="btn btn-primary">Activate!</button>
<select id="example-onInitialized" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<button id="example-onInitialized-button" class="btn btn-primary">Activate!</button>
<select id="example-onInitialized" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-onInitialized-button').on('click', function() {
$('#example-onInitialized').multiselect({
onInitialized: function(select, container) {
alert('Initialized.');
}
});
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-onDropdownShow">onDropdownShow</code></td>
<td>
<p>显示下拉菜单时调用的回调。</p>
<p class="alert alert-warning"><code>onDropdownShow</code> 使用Twitter Bootstrap 2.3时， 该选项不可用。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-onDropdownShow" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-onDropdownShow" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-onDropdownShow').multiselect({
onDropdownShow: function(event) {
alert('Dropdown shown.');
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-onDropdownHide">onDropdownHide</code></td>
<td>
<p>关闭下拉列表时调用的回调。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-onDropdownHide" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-onDropdownHide" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-onDropdownHide').multiselect({
onDropdownHide: function(event) {
alert('Dropdown closed.');
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-onDropdownShown">onDropdownShown</code></td>
<td>
<p>显示下拉列表后 调用的回调。</p>
<p class="alert alert-warning"> The <code>onDropdownShown</code> wn使用Twitter Bootstrap 2.3时， 该选项不可用。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-onDropdownShown" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-onDropdownShown" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-onDropdownShown').multiselect({
onDropdownShown: function(event) {
alert('Dropdown closed.');
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-onDropdownHidden">onDropdownHidden</code></td>
<td>
<p>下拉菜单关闭后 调用的回调。 </p>
<p class="alert alert-warning"><code>onDropdownHidden</code> 下拉菜单关闭后 调用的回调。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-onDropdownHidden" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-onDropdownHidden" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-ondropdownHidden').multiselect({
onDropdownHidden: function(event) {
alert('Dropdown closed.');
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-buttonClass">buttonClass</code></td>
<td>
<p>多选按钮的类别。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-buttonClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-buttonClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonClass').multiselect({
buttonClass: 'btn btn-link'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-inheritClass">inheritClass</code></td>
<td>
<p>从原始选择继承按钮的类。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-inheritButton" class="btn-primary" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-inheritButton" class="btn-primary" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-inheritButton').multiselect({
inheritClass: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-buttonContainer">buttonContainer</code></td>
<td>
<p>包含按钮和下拉菜单的容器。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-buttonContainer" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-buttonContainer" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonContainer').multiselect({
buttonContainer: '<div class="btn-group" />'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-buttonWidth">buttonWidth</code></td>
<td>
<p>使用此选项可以固定多选按钮的宽度。 </p>
<p class="alert alert-info">实际上， <code>buttonWidth</code> 描述 <code>.btn-group</code>容器的宽度并将的宽度<code>button</code> 设置为<code>100%</code>. </p>
<div class="code-window">
<div class="code-preview">
<select id="example-buttonWidth" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-buttonWidth" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonWidth').multiselect({
buttonWidth: '400px'
});
</code></pre>
</div>
<p>请注意，如果按钮标题中的文本太长，则会被截断并使用省略号</p>
<div class="code-window">
<div class="code-preview">
<select id="example-buttonWidth-overflow" multiple="multiple">
<option value="1" selected>Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-buttonWidth-overflow" multiple="multiple">
<option value="1" selected>Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonWidth-overflow').multiselect({
buttonWidth: '150px'
});
</code></pre>
</div>
<p>这对于长选项也适用： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-buttonWidth-overflow-option" multiple="multiple">
<option value="1" selected>Long Long Long Option 1</option>
<option value="2">Very Very Long Option 2</option>
<option value="3">Even Longer Option 3</option>
<option value="4">Ridiculous Long Option 4</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-buttonWidth-overflow-option" multiple="multiple">
<option value="1" selected>Long Long Long Option 1</option>
<option value="2">Very Very Long Option 2</option>
<option value="3">Even Longer Option 3</option>
<option value="4">Ridiculous Long Option 4</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonWidth-overflow').multiselect({
buttonWidth: '150px'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-buttonText">buttonText</code></td>
<td>
<p>一个回调，用于指定按钮上显示的文本，具体取决于当前选择的选项。 </p>
<p>回调获取当前选定的<code>options</code> 和 <code>select</code> 参数，并返回显示为按钮文本的字符串。如果未选择任何选项，则<code>buttonText</code> 返回默认回调<code>nonSelectedText</code>，如果选择的选项 <code>nSelectedText</code> 多于 <code>numberDisplayed</code> 则返回默认回调，如果选择的选项少于<code>numberDisplayed</code> 选项，则返回所选选项的名称。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-buttonText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-buttonText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonText').multiselect({
buttonText: function(options, select) {
if (options.length === 0) {
return 'No option selected ...';
}
else if (options.length > 3) {
return 'More than 3 options selected!';
}
else {
var labels = [];
options.each(function() {
if ($(this).attr('label') !== undefined) {
labels.push($(this).attr('label'));
}
else {
labels.push($(this).html());
}
});
return labels.join(', ') + '';
}
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-buttonTitle">buttonTitle</code></td>
<td>
<p>指定按钮标题的回调。 </p>
<p>回调获取当前选定的<code>options</code>和 <code>select</code>参数，并以字符串形式返回按钮的标题。如果没有选择任何选项，并且选择的选项名称少于options，则<code>buttonTitle</code> 返回默认回调。如果选择了多个选项，则返回。 <code>nonSelectedText</code><code>numberDisplayed</code><code>numberDisplayed</code><code>nSelectedText</code></p>
<div class="code-window">
<div class="code-preview">
<select id="example-buttonTitle" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-buttonTitle" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-buttonTitle').multiselect({
buttonText: function(options, select) {
return 'Check the title!';
},
buttonTitle: function(options, select) {
var labels = [];
options.each(function () {
labels.push($(this).text());
});
return labels.join(' - ');
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-nonSelectedText">nonSelectedText</code></td>
<td>
<p>未选择任何选项时显示的文本。此选项在默认值<code>buttonText</code> 和 <code>buttonTitle</code> 功能中使用。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-nonSelectedText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-nonSelectedText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-nonSelectedText').multiselect({
nonSelectedText: 'Check an option!'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-nSelectedText">nSelectedText</code></td>
<td>
<p>如果 <code>numberDisplayed</code> 选择了多个选项，则显示的文本。默认 <code>buttonText</code> 和<code>buttonTitle</code>回调使用此选项。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-nSelectedText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-nSelectedText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-nSelectedText').multiselect({
nSelectedText: ' - Too many options selected!'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-allSelectedText">allSelectedText</code></td>
<td>
<p><code>allSelectedText</code> 是如果选择所有选项则显示的文本。您可以<code>allSelectedText</code> 通过将其设置为false 来禁用显示。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-allSelectedText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-allSelectedText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-allSelectedText').multiselect({
allSelectedText: 'No option left ...'
});
</code></pre>
</div>
<p>结合使用以下选项，此选项可能很有用 <code>includeSelectAllOption</code>: </p>
<div class="code-window">
<div class="code-preview">
<select id="example-allSelectedText-includeSelectAllOption" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-allSelectedText-includeSelectAllOption" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-allSelectedText-includeSelectAllOption').multiselect({
includeSelectAllOption: true,
allSelectedText: 'No option left ...'
});
</code></pre>
</div>
<p>请注意，<code>allSelectedText</code> 如果只有一个选项可用，则不会显示。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-allSelectedText-allSelectedText-single" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-allSelectedText-allSelectedText-single" multiple="multiple">
<option value="1">Option 1</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-allSelectedText-allSelectedText-single').multiselect({
includeSelectAllOption: true,
allSelectedText: 'No option left ...'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-numberDisplayed">numberDisplayed</code></td>
<td>
<p><code>buttonText</code> 和<code>buttonTitle</code> 功能 使用此选项来确定是否显示太多选项。 </p>
<p class="alert alert-info">可以通过设置<code>numberDisplayed</code> 为禁用该功能 <code>0</code>.</p>
<div class="code-window">
<div class="code-preview">
<select id="example-numberDisplayed" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-numberDisplayed" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-numberDisplayed').multiselect({
numberDisplayed: 1
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-delimiterText">delimiterText</code></td>
<td>
<p>设置鼠标悬停的所选项目列表的分隔符。默认为'，'。设置为“ \ n”以显示整洁。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-delimiterText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-delimiterText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3" selected="selected">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-delimiterText').multiselect({
delimiterText: '; '
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-optionLabel">optionLabel</code></td>
<td>
<p>用于定义选项标签的回调。</p>
<div class="code-window">
<div class="code-preview">
<select id="example-optionLabel" multiple="multiple">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
<option value="option-5">Option 5</option>
<option value="option-6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-label" multiple="multiple">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
<option value="option-5">Option 5</option>
<option value="option-6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-optionLabel').multiselect({
optionLabel: function(element) {
return $(element).html() + ' (' + $(element).val() + ')';
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-optionClass">optionClass</code></td>
<td>
<p>一个回调，用于定义<code>li</code>包含复选框和标签的元素的类。</p>
<div class="code-window">
<div class="code-preview">
<div id="example-optionClass-container">
<select id="example-optionClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div id="example-optionClass-container">
<select id="example-optionClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-optionClass').multiselect({
optionClass: function(element) {
var value = $(element).val();
if (value % 2 == 0) {
return 'even';
} else {
return 'odd';
}
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-selectedClass">selectedClass</code></td>
<td>
<p>应用于所选选项的<code>class</code>。</p>
<div class="code-window">
<div class="code-preview">
<select id="example-selectedClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-selectedClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-css">#example-selectedClass-container li.multiselect-selected a label {
color: red;
}
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-selectedClass').multiselect({
buttonContainer: '<div class="btn-group" id="example-selectedClass-container"></div>',
selectedClass: 'active multiselect-selected'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-includeSelectAllOption">includeSelectAllOption</code></td>
<td>
<p>设置为<code>true</code> 或 <code>false</code>以启用或禁用全选选项。 </p>
<p class="alert alert-info"> 要查看同时使用全选选项和过滤器的示例，请参阅该 <code>enableFiltering</code> 选项的文档。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-includeSelectAllOption" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-includeSelectAllOption" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-includeSelectAllOption').multiselect({
includeSelectAllOption: true
});
</code></pre>
</div>
<p><code>includeSelectAllOption</code> 选项也可以与一起使用<code>optgroup</code></p>
<div class="code-window">
<div class="code-preview">
<select id="example-includeSelectAllOption-optgroups" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option></optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option></optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-includeSelectAllOption-optgroups" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option></optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option></optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-includeSelectAllOption-optgroups').multiselect({
includeSelectAllOption: true
});
</code></pre>
</div>
<p>请注意，全选不会触发<code>onChange</code> 事件，而只会触发 <code>onSelectAll</code> 事件： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-includeSelectAllOption-onChange" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-includeSelectAllOption-onChange" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-includeSelectAllOption-onChange').multiselect({
includeSelectAllOption: true,
onChange: function(option, checked) {
alert('Not triggered when clicking the select all!');
},
});
</code></pre>
</div>
<p>选择所有元素自然会尊重禁用的元素： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-includeSelectAllOption-disbled" multiple="multiple">
<option value="1" disabled="disabled">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-includeSelectAllOption-disbled" multiple="multiple">
<option value="1" disabled="disabled">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-includeSelectAllOption-disbled').multiselect({
includeSelectAllOption: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-selectAllJustVisible">selectAllJustVisible</code></td>
<td>
<p>将 <code>includeSelectAllOption</code> 和都设置 <code>enableFiltering</code> to <code>true</code>, t全选选项始终仅选择可见选项。对于设置 <code>selectAllJustVisible</code> to <code>false</code> 这种行为改变，使得一直（不管它们是否可见）的所有选项都被选中。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-selectAllJustVisible" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-selectAllJustVisible" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllJustVisible').multiselect({
enableFiltering: true,
includeSelectAllOption: true,
selectAllJustVisible: false
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-selectAllText">selectAllText</code></td>
<td>
<p>为全选选项显示的文本。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-selectAllText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-selectAllText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllText').multiselect({
includeSelectAllOption: true,
selectAllText: 'Check all!'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-selectAllValue">selectAllValue</code></td>
<td>
<p>“全选”选项作为附加添加<code>option</code> within the <code>select</code>。为了将此选项与原始选项区分开，可以使用<code>selectAllValue</code>选项配置用于全选选项的值。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-selectAllValue" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-selectAllValue" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllValue').multiselect({
includeSelectAllOption: true,
selectAllValue: 'select-all-value'
});
</code></pre>
</div>
<p><code>selectAllValue</code> 选项通常应该是一个字符串，但是数值也可以工作：</p>
<div class="code-window">
<div class="code-preview">
<select id="example-selectAllValue-numeric" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-selectAllValue-numeric" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllValue-numeric').multiselect({
includeSelectAllOption: true,
selectAllValue: 0
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-selectAllName">selectAllName</code></td>
<td>
<p>此选项允许控制为全选选项指定的名称。有关更多详细信息，请参见<a href="#post">服务器端处理。</a></p>
<div class="code-window">
<div class="code-preview">
<select id="example-selectAllName" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-selectAllName" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllName').multiselect({
includeSelectAllOption: true,
selectAllName: 'select-all-name'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-selectAllNumber">selectAllNumber</code></td>
<td>
<p>如果设置为<code>true</code>（默认），则选中所有选项后，所选选项的数量将以括号显示。以下示例显示了将selectalloption<code>selectAllNumber</code>设置为的行为<code>false</code>: </p>
<div class="code-window">
<div class="code-preview">
<select id="example-selectAllNumber" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-selectAllNumber" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAllNumber').multiselect({
includeSelectAllOption: true,
selectAllNumber: false
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-onSelectAll">onSelectAll</code></td>
<td>
<p>当使用全选选项选择所有选项时，将触发此功能。请注意，这也可以使用<code>.multiselect('selectAll')</code>方法手动触发。 </p>
<p class="alert alert-warning"> 请注意，<code>onChange</code> 当使用“全选”选项（取消）选择所有选项时，不会触发该选项。 </p>
<p class="alert alert-warning"> 该 <code>onSelectAll</code> 如果选择所有选项被选中选项时，才会触发; 如果手动检查了所有选项，则不会触发（也将选中“全选”选项）。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-onSelectAll" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-onSelectAll" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-onSelectAll').multiselect({
includeSelectAllOption: true,
onSelectAll: function() {
alert('onSelectAll triggered!');
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-onDeselectAll">onDeselectAll</code></td>
<td>
<p>当使用全选选项取消选择所有选项时，将触发此功能。请注意，这也可以使用<code>.multiselect('deselectAll')</code> 方法手动触发。 </p>
<p class="alert alert-warning"> 请注意，<code>onChange</code> 当使用“全选”选项（取消）选择所有选项时，不会触发该选项。 </p>
<p class="alert alert-warning"><code>onDeselectAll</code> 仅当未选中“全选 ” 选项时，才会触发该选项。如果未手动选中所有选项，则不会触发该操作（也将取消选中“全选”选项）。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-onDeselectAll" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-onDeselectAll" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-onDeselectAll').multiselect({
includeSelectAllOption: true,
onDeselectAll: function() {
alert('onDeselectAll triggered!');
}
})
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-enableFiltering">enableFiltering</code></td>
<td>
<p>设置为<code>true</code> 或 <code>false</code> 以启用或禁用过滤器。 <code>input</code> 将添加一个过滤器以动态过滤所有选项。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableFiltering" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableFiltering" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableFiltering').multiselect({
enableFiltering: true
});
</code></pre>
</div>
<p><code>enableFiltering</code> 选项可以轻松地与以下 <code>includeSelectAllOption</code> 选项结合使用： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableFiltering-includeSelectAllOption" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableFiltering-includeSelectAllOption" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableFiltering-includeSelectAllOption').multiselect({
includeSelectAllOption: true,
enableFiltering: true
});
</code></pre>
</div>
<p><code>enableFiltering</code> 选项也可以与一起使用 <code>optgroup</code></p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableFiltering-optgroups" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option></optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option></optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableFiltering-optgroups" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option></optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option></optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-example-enableFiltering-optgroups').multiselect({
enableFiltering: true
});
</code></pre>
</div>
<p>Clickable <code>optgroup</code>也受支持： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableFiltering-enableClickableOptGroups" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option></optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option></optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableFiltering-enableClickableOptGroups" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2" selected="selected">Option 1.2</option>
<option value="1-3" selected="selected">Option 1.3</option></optgroup>
<optgroup label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option></optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-example-enableFiltering-enableClickableOptgroups').multiselect({
enableFiltering: true,
enableClickableOptGroups: true
});
</code></pre>
</div>
<p>最后，该选项还可以与 <code>onChange</code> 或类似事件一起使用： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableFiltering-onChange-onDropdownHide" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableFiltering-onChange-onDropdownHide" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableFiltering-onChange-onDropdownHide').multiselect({
enableFiltering: true,
onChange: function(option, checked) {
alert('onChange!');
},
onDropdownHide: function(event) {
alert('onDropdownHide!');
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-enableCaseInsensitiveFiltering">enableCaseInsensitiveFiltering</code></td>
<td>
<p>上面配置的过滤器将使用区分大小写的过滤，通过对此行为进行设置 <code>enableCaseInsensitiveFiltering</code> to <code>true</code> 可以将其更改为使用区分大小写的过滤。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableCaseInsensitiveFiltering" multiple="multiple">
<option value="1">OpTiOn 1</option>
<option value="2">OpTiOn 2</option>
<option value="3">OpTiOn 3</option>
<option value="4">OpTiOn 4</option>
<option value="5">OpTiOn 5</option>
<option value="6">OpTiOn 6</option>
<option value="7">OpTiOn 7</option>
<option value="8">OpTiOn 8</option>
<option value="9">OpTiOn 9</option>
<option value="10">OpTiOn 10</option>
<option value="11">OpTiOn 11</option>
<option value="12">OpTiOn 12</option>
<option value="13">OpTiOn 13</option>
<option value="14">OpTiOn 14</option>
<option value="15">OpTiOn 15</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableCaseInsensitiveFiltering" multiple="multiple">
<option value="1">OpTiOn 1</option>
<option value="2">OpTiOn 2</option>
<option value="3">OpTiOn 3</option>
<option value="4">OpTiOn 4</option>
<option value="5">OpTiOn 5</option>
<option value="6">OpTiOn 6</option>
<option value="7">OpTiOn 7</option>
<option value="8">OpTiOn 8</option>
<option value="9">OpTiOn 9</option>
<option value="10">OpTiOn 10</option>
<option value="11">OpTiOn 11</option>
<option value="12">OpTiOn 12</option>
<option value="13">OpTiOn 13</option>
<option value="14">OpTiOn 14</option>
<option value="15">OpTiOn 15</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableCaseInsensitiveFiltering').multiselect({
enableCaseInsensitiveFiltering: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-enableFullValueFiltering">enableFullValueFiltering</code></td>
<td>
<p>设置为<code>true</code>启用全值过滤，即显示所有查询的前缀的选项。此处给出一个示例： <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/555">#555</a>. </p>
<div class="code-window">
<div class="code-preview">
<select id="example-enableFullValueFiltering" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-enableFullValueFiltering" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
<option value="12">Option 12</option>
<option value="13">Option 13</option>
<option value="14">Option 14</option>
<option value="15">Option 15</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enableFullValueFiltering').multiselect({
enableFiltering: true,
enableFullValueFiltering: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-filterBehavior">filterBehavior</code></td>
<td>
<p>根据选项过滤选项<code>text</code>。可以更改此行为以使用<code>value</code> 选项的或 <code>both</code> 文本和值。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-filterBehavior" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 6</option>
<option value="g">Option 7</option>
<option value="h">Option 8</option>
<option value="i">Option 9</option>
<option value="j">Option 10</option>
<option value="k">Option 11</option>
<option value="l">Option 12</option>
<option value="m">Option 13</option>
<option value="n">Option 14</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-filterBehavior" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 6</option>
<option value="g">Option 7</option>
<option value="h">Option 8</option>
<option value="i">Option 9</option>
<option value="j">Option 10</option>
<option value="k">Option 11</option>
<option value="l">Option 12</option>
<option value="m">Option 13</option>
<option value="n">Option 14</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-filterBehavior').multiselect({
enableFiltering: true,
filterBehavior: 'value'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-filterPlaceholder">filterPlaceholder</code></td>
<td>
<p>用于过滤器输入的占位符。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-filter-placeholder" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 6</option>
<option value="g">Option 7</option>
<option value="h">Option 8</option>
<option value="i">Option 9</option>
<option value="j">Option 10</option>
<option value="k">Option 11</option>
<option value="l">Option 12</option>
<option value="m">Option 13</option>
<option value="n">Option 14</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-filter-placeholder" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 6</option>
<option value="g">Option 7</option>
<option value="h">Option 8</option>
<option value="i">Option 9</option>
<option value="j">Option 10</option>
<option value="k">Option 11</option>
<option value="l">Option 12</option>
<option value="m">Option 13</option>
<option value="n">Option 14</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-filter-placeholder').multiselect({
enableFiltering: true,
filterPlaceholder: 'Search for something...'
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-includeResetOption">includeResetOption</code></td>
<td>
<p>在下拉菜单中添加重置按钮。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-include-reset-option" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 6</option>
<option value="g">Option 7</option>
<option value="h">Option 8</option>
<option value="i">Option 9</option>
<option value="j">Option 10</option>
<option value="k">Option 11</option>
<option value="l">Option 12</option>
<option value="m">Option 13</option>
<option value="n">Option 14</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-include-reset-option" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 6</option>
<option value="g">Option 7</option>
<option value="h">Option 8</option>
<option value="i">Option 9</option>
<option value="j">Option 10</option>
<option value="k">Option 11</option>
<option value="l">Option 12</option>
<option value="m">Option 13</option>
<option value="n">Option 14</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-include-reset-option').multiselect({
includeResetOption: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-includeResetDivider">includeResetDivider</code></td>
<td>
<p>在重置按钮和选项之间添加分隔线。</p>
<div class="code-window">
<div class="code-preview">
<select id="example-include-reset-divider" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 6</option>
<option value="g">Option 7</option>
<option value="h">Option 8</option>
<option value="i">Option 9</option>
<option value="j">Option 10</option>
<option value="k">Option 11</option>
<option value="l">Option 12</option>
<option value="m">Option 13</option>
<option value="n">Option 14</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-include-reset-divider" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 6</option>
<option value="g">Option 7</option>
<option value="h">Option 8</option>
<option value="i">Option 9</option>
<option value="j">Option 10</option>
<option value="k">Option 11</option>
<option value="l">Option 12</option>
<option value="m">Option 13</option>
<option value="n">Option 14</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-include-reset-divider').multiselect({
includeResetOption: true,
includeResetDivider: true
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-resetText">resetText</code></td>
<td>
<p>在下拉菜单中添加重置按钮。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-reset-text" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 6</option>
<option value="g">Option 7</option>
<option value="h">Option 8</option>
<option value="i">Option 9</option>
<option value="j">Option 10</option>
<option value="k">Option 11</option>
<option value="l">Option 12</option>
<option value="m">Option 13</option>
<option value="n">Option 14</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-reset-text" multiple="multiple">
<option value="a">Option 1</option>
<option value="b">Option 2</option>
<option value="c">Option 3</option>
<option value="d">Option 4</option>
<option value="e">Option 5</option>
<option value="f">Option 6</option>
<option value="g">Option 7</option>
<option value="h">Option 8</option>
<option value="i">Option 9</option>
<option value="j">Option 10</option>
<option value="k">Option 11</option>
<option value="l">Option 12</option>
<option value="m">Option 13</option>
<option value="n">Option 14</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-reset-text').multiselect({
includeResetOption: true,
resetText: "Reset all"
});
</code></pre>
</div>
</td>
</tr>
</tbody>
</table>
<h5><strong>模板</strong></h5>
<p>可以使用模板来控制生成的HTML标记。基本上，模板是简单的配置选项。默认模板如下所示： </p>
<p class="alert alert-warning"> 但是，请注意，弄乱模板的类可能会导致意外行为。例如，按钮应始终具有class <code>.multiselect</code>, </p>
<p class="alert alert-info"> 此外，请注意，其他选项也可能会对模板产生影响，例如该<code>buttonClass</code> 选项。 </p>
<pre class="line-numbers"><code class="language-javascript">$('#example').multiselect({
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
ul: '<ul class="multiselect-container dropdown-menu"></ul>',
filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
li: '<li><a href="javascript:void(0);"><label></label></a></li>',
divider: '<li class="multiselect-item divider"></li>',
liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>'
}
});</code></pre>
<p>例如，通过修改模板，可以使用其他元素代替按钮： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-templates-button" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-templates-button" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-templates-button').multiselect({
buttonContainer: '<div></div>',
buttonClass: '',
templates: {
button: '<span class="multiselect dropdown-toggle" data-toggle="dropdown">Click me!</span>'
}
});
</code></pre>
</div>
<p>最有趣的模板是<code>li</code> 允许自定义显示选项的模板。例如（有关详细信息，请参见 <a href="https://github.com/davidstutz/bootstrap-multiselect/pull/738">#738</a> ）以在选项中包括输入元素： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-templates-input" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-templates-input" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-templates-input').multiselect({
templates: {
li: '<li><a><label style="display:inline;"></label><input type="text" /></a></li>'
}
});
</code></pre>
</div>
<h5><strong>造型</strong></h5>
<p>插件的样式可以通过CSS完全适应；下面显示了一个完整的示例-包括全选选项，过滤器和选项gorups_</p>
<pre class="line-numbers"><code class="language-html">
<ul class="multiselect-container dropdown-menu">
<!-- Filter -->
<li class="multiselect-item multiselect-filter" value="0">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
<input class="form-control multiselect-search" type="text" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button>
</span>
</div>
</li>
<!-- Select all -->
<li class="multiselect-item multiselect-all" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(234, 234, 234); background: rgb(243, 243, 243);">
<a tabindex="0" class="multiselect-all"><label class="checkbox" style="padding: 3px 20px 3px 35px;"><input type="checkbox" value="multiselect-all"> Select all</label></a>
</li>
<!-- Collapsible and clickable opt group -->
<li class="multiselect-item multiselect-group">
<a href="javascript:void(0);">
<label><input type="checkbox" value="undefined"><b> Group 1</b></label>
<span class="caret-container"><b class="caret"></b></span>
</a>
</li>
<!-- Disabled and hidden option (hidden because of collapsible opt groups) -->
<li class="disabled hidden">
<a tabindex="-1"><label class="checkbox"><input type="checkbox" value="1-1" disabled=""> Option 1.1</label></a>
</li>
<!-- Hidden but select option -->
<li class="active hidden">
<a tabindex="0"><label class="checkbox"><input type="checkbox" value="1-2"> Option 1.2</label></a>
</li>
<!-- ... -->
<!-- Another opt group -->
<li class="multiselect-item multiselect-group">
<a href="javascript:void(0);">
<label><input type="checkbox" value="undefined"><b> Group 2</b></label>
<span class="caret-container"><b class="caret"></b></span>
</a>
</li>
<!-- Visible but not selected option -->
<li>
<a tabindex="0"><label class="checkbox"><input type="checkbox" value="2-1"> Option 2.1</label></a>
</li>
</ul>
</code></pre>
<p>最重要的类别是： <code>multiselect-container</code>, <code>multiselect-filter</code>, <code>multiselect-all</code>, <code>multiselect-item</code>, <code>multiselect-group</code> as well as <code>disabled</code> and <code>active</code>。折叠和过滤选项均使用类 <code>multiselect-filter-hidden</code> and <code>multiselect-collapsible-hidden</code> are used. </p>
<h5><strong>方法</strong></h5>
<table class="table layout-fixed">
<tbody>
<tr>
<td width="30%"><code>.multiselect('destroy')</code></td>
<td>
<p>此方法用于销毁给定元素上的插件-意味着取消绑定插件。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<button id="example-destroy-button" class="btn btn-danger">Destroy/Unbind</button>
<select id="example-destroy" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<button id="example-destroy-button" class="btn btn-danger">Destroy/Unbind</button><
<select id="example-destroy" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-destroy').multiselect();
$('#example-destroy-button').on('click', function() {
$('#example-destroy').multiselect('destroy');
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code>.multiselect('refresh')</code></td>
<td>
<p>此方法用于根据中的当前选择的选项刷新选中的复选框 <code>select</code>。点击“选择一些选项”以选择一些选项。然后单击刷新。插件将相应地更新复选框。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-refresh" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-refresh-select" class="btn btn-default">Select some options!</button>
<button id="example-refresh-deselect" class="btn btn-default">Deselect some options...</button>
<button id="example-refresh-button" class="btn btn-primary">Refresh</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-refresh" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-refresh-select" class="btn btn-default">Select some options!</button>
<button id="example-refresh-deselect" class="btn btn-default">Deselect some options...</button>
<button id="example-refresh-button" class="btn btn-primary">Refresh</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-refresh').multiselect();
$('#example-refresh-select').on('click', function() {
$('option[value="1"]', $('#example-refresh')).prop('selected', true);
$('option[value="3"]', $('#example-refresh')).prop('selected', true);
$('option[value="4"]', $('#example-refresh')).prop('selected', true);
alert('Option 1, 2 and 4.');
});
$('#example-refresh-deselect').on('click', function() {
$('option', $('#example-refresh')).each(function(element) {
$(this).removeAttr('selected').prop('selected', false);
});
});
$('#example-refresh-button').on('click', function() {
$('#example-refresh').multiselect('refresh');
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code>.multiselect('rebuild')</code></td>
<td>
<p>重建整个下拉菜单。所有选择的选项将保持选中状态（如果仍然存在！）。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-rebuild" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-rebuild-add" class="btn btn-default">Add some options!</button>
<button id="example-rebuild-delete" class="btn btn-default">Remove some options...</button>
<button id="example-rebuild-button" class="btn btn-primary">Rebuild</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-rebuild" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-rebuild-add" class="btn btn-default">Add some options!</button>
<button id="example-rebuild-delete" class="btn btn-default">Remove some options...</button>
<button id="example-rebuild-button" class="btn btn-primary">Rebuild</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-rebuild').multiselect();
$('#example-rebuild-button').on('click', function() {
$('#example-rebuild').multiselect('rebuild');
});
$('#example-rebuild-add').on('click', function() {
$('#example-rebuild').append('<option value="add1">Addition 1</option><option value="add2">Addition 2</option><option value="add3">Addition 3</option>');
});
$('#example-rebuild-delete').on('click', function() {
$('option[value="add1"]', $('#example-rebuild')).remove();
$('option[value="add2"]', $('#example-rebuild')).remove();
$('option[value="add3"]', $('#example-rebuild')).remove();
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code>.multiselect('select', value)</code></td>
<td>
<p>根据其值选择一个选项。也可以使用值数组。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-select" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-select-button" class="btn btn-default">Select some options...</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-select" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-select-button" class="btn btn-default">Select some options...</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-select').multiselect();
$('#example-select-button').on('click', function() {
$('#example-select').multiselect('select', ['1', '2', '4']);
alert('Selected 1, 2 and 4.');
});
</code></pre>
</div>
<p>该方法提供了一个附加参数：<code>.multiselect('select', value, triggerOnChange)</code>。如果第二个参数设置为true，则该方法将手动触发该<code>onChange</code>选项。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-select-onChange" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-select-onChange-button" class="btn btn-default">Select one option</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-select-onChange" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-select-onChange-button" class="btn btn-default">Select one option</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-select-onChange').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-select-onChange-button').on('click', function() {
$('#example-select-onChange').multiselect('select', '1', true);
});
</code></pre>
</div>
<p>选择乘数值时，上述参数也可以使用。请注意，<code>onChange</code>每个选择的选项都会单独调用！ </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-select-onChange-array" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-select-onChange-array-button" class="btn btn-default">Select two options</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-select-onChange-array" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-select-onChange-array-button" class="btn btn-default">Select two options</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-select-onChange-array').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-select-onChange-array-button').on('click', function() {
$('#example-select-onChange-array').multiselect('select', ['1', '3'], true);
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code>.multiselect('deselect', value)</code></td>
<td>
<p>通过其值取消选择一个选项。也可以使用值数组。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-deselect" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-deselect-button" class="btn btn-default">Deselect some options...</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-deselect" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-deselect-button" class="btn btn-default">Deselect some options...</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-deselect').multiselect();
$('#example-deselect-button').on('click', function() {
$('#example-deselect').multiselect('deselect', ['1', '2', '4']);
alert('Deselected 1, 2 and 4.');
});
</code></pre>
</div>
<p>该方法提供了一个附加参数：<code>.multiselect('deselect', value, triggerOnChange)</code>。如果第二个参数设置为true，则该方法将手动触发该<code>onChange</code> 选项。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-deselect-onChange" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-deselect-onChange-button" class="btn btn-default">Deselect one option</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-deselect-onChange" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-deselect-onChange-button" class="btn btn-default">Deselect one option</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-deselect-onChange').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-deselect-onChange-button').on('click', function() {
$('#example-deselect-onChange').multiselect('deselect', '1', true);
});
</code></pre>
</div>
<p>取消选择多个选项时，上述参数也可以使用。请注意，<code>onChange</code>将分别为每个取消选择的选项调用。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-deselect-onChange-array" multiple="multiple">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-deselect-onChange-array-button" class="btn btn-default">Deselect two options</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-deselect-onChange-array" multiple="multiple">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-deselect-onChange-array-button" class="btn btn-default">Deselect two options</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-deselect-onChange-array').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-deselect-onChange-array-button').on('click', function() {
$('#example-deselect-onChange-array').multiselect('deselect', '1', true);
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code>.multiselect('selectAll', justVisible)</code></td>
<td>
<p>选择所有选项。如果<code>justVisible</code> 设置为 <code>true</code>或不提供，则选择所有可见选项（使用过滤器时），否则选择所有选项（<code>justVisible</code>设置为<code>false</code></p>
<p class="alert alert-info"> 请注意，设置<code>justVisible</code> to <code>true</code>或不提供任何参数将选择所有可见选项，即需要打开下拉菜单。 </p>
<p class="alert alert-info"> 当前，需要在调用 <code>.multiselect('updateButtonText')</code> 之后手动调用 <code>.multiselect('selectAll', justVisible)</code>. </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-selectAll" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-selectAll-visible" class="btn btn-default">Select all visible options</button>
<button id="example-selectAll-all" class="btn btn-default">Select all options</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-selectAll" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-selectAll-visible" class="btn btn-default">Select all visible options</button>
<button id="example-selectAll-all" class="btn btn-default">Select all options</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-selectAll').multiselect();
$('#example-selectAll-visible').on('click', function() {
$('#example-selectAll').multiselect('selectAll', true);
$('#example-selectAll').multiselect('updateButtonText');
});
$('#example-selectAll-all').on('click', function() {
$('#example-selectAll').multiselect('selectAll', false);
$('#example-selectAll').multiselect('updateButtonText');
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code>.multiselect('deselectAll', justVisible)</code></td>
<td>
<p>取消选择所有选项。如果<code>justVisible</code> 设置为 <code>true</code> 或不提供，则取消选择所有可见选项，否则取消选择（<code>justVisible</code>设置为<code>false</code>）所有选项。 </p>
<p class="alert alert-info"> 请注意，设置<code>justVisible</code> 为 <code>true</code>或不提供任何参数将选择所有可见选项，即需要打开下拉菜单。 </p>
<p class="alert alert-info"> 当前，需要在调用 <code>.multiselect('updateButtonText')</code> 之后手动调用 <code>.multiselect('selectAll', justVisible)</code>. </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-deselectAll" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-deselectAll-visible" class="btn btn-default">Deselect all visible options</button>
<button id="example-deselectAll-all" class="btn btn-default">Deselect all options</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-deselectAll" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-deselectAll-visible" class="btn btn-default">Deselect all visible options</button>
<button id="example-deselectAll-all" class="btn btn-default">Deselect all options</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-deselectAll').multiselect();
$('#example-deselectAll-visible').on('click', function() {
$('#example-deselectAll').multiselect('deselectAll', true);
$('#example-deselectAll').multiselect('updateButtonText');
});
$('#example-deselectAll-all').on('click', function() {
$('#example-deselectAll').multiselect('deselectAll', false);
$('#example-deselectAll').multiselect('updateButtonText');
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code>.multiselect('updateButtonText')</code></td>
<td>
<p>手动选择/取消选择选项和相应的复选框时，此功能将更新按钮的文本和标题。 </p>
<p class="alert alert-info"> 请注意，通常仅在使用<code>.multiselect('selectAll', justVisible)</code> 或时才需要此方法 <code>.multiselect('deselectAll', justVisible)</code>。在所有其他情况下， <code>.multiselect('refresh')</code> 应使用。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-updateButtonText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-updateButtonText-select" class="btn btn-default">Select some options ...</button>
<button id="example-updateButtonText-update" class="btn btn-default">Update</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-updateButtonText" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-updateButtonText-select" class="btn btn-default">Select some options ...</button>
<button id="example-updateButtonText-update" class="btn btn-default">Update</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-updateButtonText').multiselect({
buttonContainer: '<div class="btn-group" id="example-updateButtonText-container"></div>'
});
$('#example-updateButtonText-select').on('click', function() {
$('option[value="1"]', $('#example-updateButtonText')).prop('selected', true);
$('option[value="3"]', $('#example-updateButtonText')).prop('selected', true);
$('input[value="1"]', $('#example-updateButtonText-container')).prop('checked', true);
$('input[value="3"]', $('#example-updateButtonText-container')).prop('checked', true);
$('input[value="1"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
$('input[value="3"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
});
$('#example-updateButtonText-update').on('click', function() {
$('#example-updateButtonText').multiselect('updateButtonText');
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code>.multiselect('setOptions', options)</code></td>
<td>
<p>初始化多选后用于更改配置。与结合使用可能很有用<code>.multiselect('rebuild')</code>. </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<button id="example-setOptions-button" class="btn btn-primary">Configuration Set 2</button>
<select id="example-setOptions" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<button id="example-setOptions-button" class="btn btn-primary">Configuration Set 2</button>
<select id="example-setOptions" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">var firstConfigurationSet = {
includeSelectAllOption: false,
enableFiltering: false
};
var secondConfigurationSet = {
includeSelectAllOption: false,
enableFiltering: true
};
var set = 1;
$('#example-setOptions').multiselect(firstConfigurationSet);
function rebuildMultiselect(options) {
$('#example-setOptions').multiselect('setOptions', options);
$('#example-setOptions').multiselect('rebuild');
}
$('#example-setOptions-button').on('click', function(event) {
switch (set) {
case 2:
rebuildMultiselect(firstConfigurationSet);
$(this).text('Configuration Set 2');
set = 1;
break;
case 1:
default:
rebuildMultiselect(secondConfigurationSet);
$(this).text('Configuration Set 1');
set = 2;
break;
}
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code>.multiselect('disable')</code></td>
<td>
<p>禁用基础选择和下拉按钮。 </p>
<div class="code-window">
<div class="code-preview">
<button id="example-disable-button" class="btn btn-primary">Disable...</button>
<select id="example-disable" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<button id="example-disable-button" class="btn btn-primary">Disable...</button>
<select id="example-disable" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-disable').multiselect();
$('#example-disable-button').on('click', function() {
$('#example-disable').multiselect('disable');
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code>.multiselect('enable')</code></td>
<td>
<p>同时启用基础选择和下拉按钮。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-enable" disabled="disabled" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-enable-button" class="btn btn-default">Enable!</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-enable" disabled="disabled" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<button id="example-enable-button" class="btn btn-default">Enable!</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-enable').multiselect();
$('#example-enable-button').on('click', function() {
$('#example-enable').multiselect('enable');
});
</code></pre>
</div>
</td>
</tr>
<tr>
<td><code>.multiselect('dataprovider', data)</code></td>
<td>
<p>此方法用于以编程方式提供选项。请参见下面的示例。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-dataprovider" multiple="multiple"></select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-dataprovider" multiple="multiple"></select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-dataprovider').multiselect();
var options = [
{label: 'Option 1', title: 'Option 1', value: '1', selected: true},
{label: 'Option 2', title: 'Option 2', value: '2'},
{label: 'Option 3', title: 'Option 3', value: '3', selected: true},
{label: 'Option 4', title: 'Option 4', value: '4'},
{label: 'Option 5', title: 'Option 5', value: '5'},
{label: 'Option 6', title: 'Option 6', value: '6', disabled: true}
];
$('#example-dataprovider').multiselect('dataprovider', options);
</code></pre>
</div>
<p>该方法还可以处理<code>optgroup</code>'s:</p>
<div class="code-window">
<div class="code-preview">
<select id="example-dataprovider-optgroups" multiple="multiple"></select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-dataprovider-optgroups" multiple="multiple"></select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-dataprovider-optgroups').multiselect();
var optgroups = [
{
label: 'Group 1', children: [
{label: 'Option 1.1', value: '1-1', selected: true},
{label: 'Option 1.2', value: '1-2'},
{label: 'Option 1.3', value: '1-3'}
]
},
{
label: 'Group 2', children: [
{label: 'Option 2.1', value: '1'},
{label: 'Option 2.2', value: '2'},
{label: 'Option 2.3', value: '3', disabled: true}
]
}
];
$('#example-dataprovider-optgroups').multiselect('dataprovider', optgroups);
</code></pre>
</div>
<p>您可以在选项组子项和未分组的选项上添加自定义数据属性： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-dataprovider-data-attributes" multiple="multiple"></select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-dataprovider-data-attributes" multiple="multiple"></select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-dataprovider-data-attributes').multiselect();
var optionsData =[
{
"label": "Option 1",
"value": 1,
"selected": true,
"attributes": {
"some-attribute": 1,
"another-attribute": false
}
},
{
"label": "Option 2",
"value": 2,
"selected": false,
"attributes": {
"some-attribute": 2
}
}
];
$("#example-dataprovider-data-attributes").multiselect('dataprovider', optionsData);
</code></pre>
</div>
<p>呈现为： </p>
<pre class="line-numbers"><code class="language-html"><option value="1" label="Option 1" selected="selected" data-some-attribute="1" data-another-attribute="false"></option>
<option value="2" label="Option 2" data-some-attribute="2"></option>
</code></pre>
</td>
</tr>
<tr>
<td><code>.multiselect('setAllSelectedText', value)</code></td>
<td>
<p>当在运行时选择所有选项时，使用此方法以编程方式提供新文本以显示在按钮中。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-set-all-selected-text" multiple="multiple">
<option value="1" selected>Option 1</option>
</select>
<input id="new-all-selected-text-box" type="text" class="form-control" placeholder="Enter new text" />
<input id="new-all-selected-text-btn" type="button" class="btn btn-default" value="Change All Selected Text" />
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-set-all-selected-text" multiple="multiple">
<option value="1" selected>Option 1</option>
</select>
<input id="new-all-selected-text-box" type="text" class="form-control" placeholder="Enter new text" />
<input id="new-all-selected-text-btn" type="button" class="btn btn-default" value="Change All Selected Text" />
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
$('#new-all-selected-text-btn').click(function(){
$('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());
});
</code></pre>
</div>
<h5><strong>进一步的例子</strong></h5>
<p><code>onChange</code> 以下示例 使用配置选项，要求确认是否取消选择一个选项。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-confirmation" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-confirmation" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-confirmation').multiselect({
onChange: function(element, checked) {
if (checked === true) {
//action taken here if true
}
else if (checked === false) {
if (confirm('Do you wish to deselect the element?')) {
//action taken here
}
else {
$("#example-confirmation").multiselect('select', element.val());
}
}
}
});
</code></pre>
</div>
<p>以上方法也可以适用于 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-confirmation-single">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-confirmation-single">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">var lastSelected = $('#example-confirmation-single option:selected').val();
$('#example-confirmation-single').multiselect({
onChange: function(element, checked) {
if (confirm('Do you wish to change the selection?')) {
lastSelected = element.val();
}
else {
$("#example-confirmation-single").multiselect('select', lastSelected);
$("#example-confirmation-single").multiselect('deselect', element.val());
}
}
});
</code></pre>
</div>
<p>使用<code>onChange</code>选项限制所选选项的数量。用户最多只能选择4个选项。然后，所有其他选项均被禁用。</p>
<div class="code-window">
<div class="code-preview">
<select id="example-limit" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-limit" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-limit').multiselect({
onChange: function(option, checked) {
// Get selected options.
var selectedOptions = $('#example-limit option:selected');
if (selectedOptions.length >= 4) {
// Disable all other checkboxes.
var nonSelectedOptions = $('#example-limit option').filter(function() {
return !$(this).is(':selected');
});
nonSelectedOptions.each(function() {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', true);
input.parent('li').addClass('disabled');
});
}
else {
// Enable all checkboxes.
$('#example-limit option').each(function() {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', false);
input.parent('li').addClass('disabled');
});
}
}
});
</code></pre>
</div>
<p>记录选择选项的顺序。选择项目时，订购号将增加并保存在该选项内。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<button id="example-order-button" class="btn btn-primary">Order</button>
<select id="example-order" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<button id="example-order-button" class="btn btn-primary">Order</button>
<select id="example-order" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">var orderCount = 0;
$('#example-order').multiselect({
onChange: function(option, checked) {
if (checked) {
orderCount++;
$(option).data('order', orderCount);
}
else {
$(option).data('order', '');
}
},
buttonText: function(options) {
if (options.length === 0) {
return 'None selected';
}
else if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = [];
options.each(function() {
selected.push([$(this).text(), $(this).data('order')]);
});
selected.sort(function(a, b) {
return a[1] - b[1];
});
var text = '';
for (var i = 0; i < selected.length; i++) {
text += selected[i][0] + ', ';
}
return text.substr(0, text.length -2);
}
},
});
$('#example-order-button').on('click', function() {
var selected = [];
$('#example-order option:selected').each(function() {
selected.push([$(this).val(), $(this).data('order')]);
});
selected.sort(function(a, b) {
return a[1] - b[1];
});
var text = '';
for (var i = 0; i < selected.length; i++) {
text += selected[i][0] + ', ';
}
text = text.substring(0, text.length - 2);
alert(text);
});
</code></pre>
</div>
<p>使用复选框模拟单个选择。该行为与带有单选按钮的多选类似，不同之处在于可以再次取消选择所选的选项。 </p>
<div class="code-window">
<div class="code-preview">
<select id="example-simulate-single" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-simulate-single" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-simulate-single').multiselect({
onChange: function(option, checked) {
var values = [];
$('#example-simulate-single option').each(function() {
if ($(this).val() !== option.val()) {
values.push($(this).val());
}
});
$('#example-simulate-single').multiselect('deselect', values);
}
});
</code></pre>
</div>
<p>同时使用重置按钮和多重选择。 </p>
<div class="code-window">
<div class="code-preview">
<form class="btn-group" id="example-reset-form">
<div class="btn-group">
<button type="reset" id="example-reset-button" class="btn btn-default">Reset</button>
<select id="example-reset" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</form>
</div>
<pre class="line-numbers"><code class="language-html"><form class="btn-group" id="example-reset-form">
<div class="btn-group">
<button type="reset" id="example-reset-button" class="btn btn-default">Reset</button>
<select id="example-reset" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</form>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-reset').multiselect();
$('#example-reset-form').on('reset', function() {
$('#example-reset option:selected').each(function() {
$(this).prop('selected', false);
})
$('#example-reset').multiselect('refresh');
});
</code></pre>
</div>
<p>多选也可用于模态： </p>
<div class="code-window">
<div class="code-preview">
<button class="btn btn-default" data-toggle="modal" data-target="#example-modal-modal">Launch modal</button>
<div class="modal fade" id="example-modal-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Bootstrap Multiselect</h4>
</div>
<div class="modal-body">
<select id="example-modal" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</div>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><button class="btn btn-default" data-toggle="modal" data-target="#example-modal-modal">Launch modal</button>
<div class="modal fade" id="example-modal-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Bootstrap Multiselect</h4>
</div>
<div class="modal-body">
<select id="example-modal" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</div>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-modal').multiselect();
</code></pre>
</div>
<p>在手风琴/折叠中使用多重选择的示例： </p>
<p class="alert alert-info"> 请注意，<code>.panel</code> 需要看到的溢出： <code>style="overflow:visible;"</code>。请参见下面的示例。 </p>
<div class="code-window">
<div class="code-preview">
<div class="panel-group" id="example-collapse-accordion">
<div class="panel panel-default" style="overflow:visible;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#example-collapse-accordion" href="#example-collapse-accordion-one">Bootstrap Multiselect</a></h4>
</div>
<div id="example-collapse-accordion-one" class="panel-collapse collapse in">
<div class="panel-body">
<select id="example-collapse" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</div>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="panel-group" id="example-collapse-accordion">
<div class="panel panel-default" style="overflow:visible;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#example-collapse-accordion" href="#example-collapse-accordion-one">
Bootstrap Multiselect
</a>
</h4>
</div>
<div id="example-collapse-accordion-one" class="panel-collapse collapse in">
<div class="panel-body">
<select id="example-collapse" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</div>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-collapse').multiselect();
</code></pre>
</div>
<p>以下示例旨在说明使用大量选项时若干功能的性能： </p>
<ul>
<li>使用全选选项<code>includeSelectAllOption</code> 设置为 <code>true</code>.</li>
<li>此外，使用过滤器 <code>enableFiltering</code> 设置为<code>true</code>.</li>
<li>另外使用<code>enableClickableOptGroups</code>.</li>
<li>重置多选。</li>
</ul>
<p class="alert alert-warning"> 以下示例需要激活。请注意，这可能需要一些时间！ </p>
<div class="code-window">
<div class="code-preview">
<div class="input-group m-b-10">
<div class="input-group-btn">
<button type="button" class="btn btn-default" aria-label="Bold">Use</button>
</div>
<input type="text" class="form-control w-10 pull-left" id="example-large-options" value="1000" />
<div class="input-group-btn">
<button type="button" class="btn btn-default no-border-lr" aria-label="Bold">options</button>
</div>
<span class="input-group-btn">
<button id="example-large-enable" class="btn btn-primary pull-left">Enable Examples</button>
</span>
</div>
<div class="btn-toolbar" style="margin-bottom:12px;">
<div class="btn-group">
<select id="example-large-includeSelectAllOption" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
</div>
<div class="btn-toolbar" style="margin-bottom:12px;">
<div class="btn-group">
<select id="example-large-includeSelectAllOption-enableFiltering" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
</div>
<div class="btn-toolbar" style="margin-bottom:12px;">
<div class="btn-group">
<select id="example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
</div>
<form id="example-large-reset-form" style="margin-bottom:12px;">
<div class="btn-group">
<button type="reset" class="btn btn-default">Reset</button>
<select id="example-large-reset" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
</form>
</div>
<pre class="line-numbers"><code class="language-html"><div class="input-group m-b-10">
<div class="input-group-btn">
<button type="button" class="btn btn-default" aria-label="Bold">Use</button>
</div>
<input type="text" class="form-control w-10 pull-left" id="example-large-options" value="1000" />
<div class="input-group-btn">
<button type="button" class="btn btn-default no-border-lr" aria-label="Bold">options</button>
</div>
<span class="input-group-btn">
<button id="example-large-enable" class="btn btn-primary pull-left">Enable Examples</button>
</span>
</div>
<div class="btn-toolbar" style="margin-bottom:12px;">
<div class="btn-group">
<select id="example-large-includeSelectAllOption" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
</div>
<div class="btn-toolbar" style="margin-bottom:12px;">
<div class="btn-group">
<select id="example-large-includeSelectAllOption-enableFiltering" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
</div>
<div class="btn-toolbar" style="margin-bottom:12px;">
<div class="btn-group">
<select id="example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
</div>
<form id="example-large-reset-form" style="margin-bottom:12px;">
<div class="btn-group">
<button type="reset" class="btn btn-default">Reset</button>
<select id="example-large-reset" multiple="multiple">
<option value="1">Option 1</option>
</select>
</div>
</form>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-large-enable').on('click', function() {
var options = $('#example-large-options').val();
if (options < 1 || options > 5000) {
$('#example-large-error').html('<p class="alert alert-error">Choose between 1 and 5000 options!</p>');
}
else {
$('#example-large-includeSelectAllOption').html('');
$('#example-large-includeSelectAllOption-enableFiltering').html('');
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').html('');
$('#example-large-reset').html('');
for (var j = 0; j < options; j++) {
i = j + 1;
$('#example-large-includeSelectAllOption').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
$('#example-large-includeSelectAllOption-enableFiltering').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
var group = Math.floor(j/10) + 1;
var number = j % 10 + 1;
if (number === 1) {
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<optgroup label="Group ' + group.toString() + '"></optgroup>');
}
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<option value="' + group.toString() + '-' + number.toString() + '">Option ' + group.toString() + '.' + number.toString() + '</option>');
$('#example-large-reset').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
}
$('#example-large-includeSelectAllOption').multiselect({
maxHeight: 200,
includeSelectAllOption: true
});
$('#example-large-includeSelectAllOption-enableFiltering').multiselect({
maxHeight: 200,
includeSelectAllOption: true,
enableFiltering: true
});
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').multiselect({
maxHeight: 200,
includeSelectAllOption: true,
enableFiltering: true,
enableClickableOptGroups: true
});
$('#example-large-reset').multiselect({
maxHeight: 200,
includeSelectAllOption: true
});
$('#example-large-reset-form').on('reset', function() {
$('#example-large-reset').multiselect('deselectAll', false);
$('#example-large-reset').multiselect('updateButtonText');
});
}
});
</code></pre>
</div>
<p>以下示例旨在演示<code>.multiselect('dataprovider', data)</code> 大量选项的性能。</p>
<p class="alert alert-warning">以下示例需要激活。请注意，这可能需要一些时间！</p>
<div class="code-window">
<div class="code-preview">
<p class="alert alert-info"><button id="example-large-dataprovider-button" class="btn btn-primary">Activate</button></p>
<select id="example-large-dataprovider" multiple="multiple"></select>
</div>
<pre class="line-numbers"><code class="language-html"><p class="alert alert-info"><button id="example-large-dataprovider-button" class="btn btn-primary">Activate</button></p>
<select id="example-large-dataprovider" multiple="multiple"></select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">var data = [];
for (var i = 0; i < 100; i++) {
var group = {label: 'Group ' + (i + 1), children: []};
for (var j = 0; j < 10; j++) {
group['children'].push({
label: 'Option ' + (i + 1) + '.' + (j + 1),
value: i + '-' + j
});
}
data.push(group);
}
$('#example-large-dataprovider-button').on('click', function() {
$('#example-large-dataprovider').multiselect({
maxHeight: 200
});
$('#example-large-dataprovider').multiselect('dataprovider', data);
});
</code></pre>
</div>
<p>下面的示例说明了如何使用JavaScript禁用选项。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group" id="example-disable-javascript-container">
<button id="example-disable-javascript-disable" class="btn btn-primary">Disable an option!</button>
<button id="example-disable-javascript-check" class="btn btn-primary">Check</button>
<select id="example-disable-javascript" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group" id="example-disable-javascript-container">
<button id="example-disable-javascript-disable" class="btn btn-primary">Disable an option!</button>
<button id="example-disable-javascript-check" class="btn btn-primary">Check</button>
<select id="example-disable-javascript" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-disable-javascript').multiselect({
includeSelectAllOption: true
});
$('#example-disable-javascript-disable').on('click', function() {
var input = $('#example-disable-javascript-container input[value="3"]');
var option = $('#example-disable-javascript-container option[value="3"]');
input.prop('disabled', true);
option.prop('disabled', true);
input.parent('label').parent('a').parent('li').addClass('disabled');
});
$('#example-disable-javascript-check').on('click', function() {
var options = '';
$('#example-disable-javascript option:selected').each(function() {
options += $(this).val() + ', ';
});
alert(options.substr(0, options.length - 2));
});
</code></pre>
</div>
<p><code>.multiselect('refresh')</code> 与大量选项一起 使用的性能示例： </p>
<p class="alert alert-warning">以下示例需要激活。请注意，这可能需要一些时间！</p>
<div class="code-window">
<div class="code-preview">
<p class="alert alert-info"><button id="example-large-refresh-button" class="btn btn-primary">Activate</button></p>
<div class="btn-group">
<select id="example-large-refresh" multiple="multiple"></select>
<button id="example-large-refresh-select" class="btn btn-default">Select every second option ...</button>
<button id="example-large-refresh-refresh" class="btn btn-primary">Refresh!</button>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><div class="btn-group">
<select id="example-large-refresh" multiple="multiple"></select>
<button id="example-large-refresh-select" class="btn btn-default">Select every second option ...</button>
<button id="example-large-refresh-refresh" class="btn btn-primary">Refresh!</button>
</div>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-large-refresh-button').on('click', function() {
for (var i = 0; i < 1000; i++) {
$('#example-large-refresh').append('<option value="' + i + '">Option ' + i + '</option>');
}
$('#example-large-refresh').multiselect();
});
$('#example-large-refresh-refresh').on('click', function() {
$('#example-large-refresh').multiselect('refresh');
});
$('#example-large-refresh-select').on('click', function() {
var count = 0;
$('#example-large-refresh option').each(function() {
var i = $(this).val();
if (i%2 == 0) {
$(this).prop('selected', true);
count++;
}
});
alert('Selected ' + count + ' options!');
});
</code></pre>
</div>
<p>下面的示例演示如何限制特定选项的选择数量<code>optgroup</code>:</p>
<div class="code-window">
<div class="code-preview">
<select id="example-optgroup-limit" multiple="multiple">
<optgroup class="group-1" label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2">Option 1.2</option>
<option value="1-3">Option 1.3</option>
</optgroup>
<optgroup class="group-2" label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-optgroup-limit" multiple="multiple">
<optgroup class="group-1" label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2">Option 1.2</option>
<option value="1-3">Option 1.3</option>
</optgroup>
<optgroup class="group-2" label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-optgroup-limit').multiselect({
onChange: function(options, checked) {
var $option = $(options);
if ($option.length == 1) {
var $group = $option.parent('optgroup')
if ($group.hasClass('group-1')) {
var $options = $('option', $group);
$options = $options.filter(':selected');
if (checked && $options.length > 2) {
alert('Cannot select more than 2 elements in this group!');
$("#example-optgroup-limit").multiselect('deselect', $option.val());
}
}
}
}
});
</code></pre>
</div>
<p>以下示例演示了<code>optgroup</code>如果 <code>option</code>选择了该组中的所有，则如何显示的标签： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-optgroup-buttonText" multiple="multiple">
<optgroup class="group-1" label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2">Option 1.2</option>
<option value="1-3">Option 1.3</option>
</optgroup>
<optgroup class="group-2" label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-optgroup-buttonText" multiple="multiple">
<optgroup class="group-1" label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="1-2">Option 1.2</option>
<option value="1-3">Option 1.3</option>
</optgroup>
<optgroup class="group-2" label="Group 2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-optgroup-buttonText').multiselect({
buttonText: function(options, select) {
// First consider the simple cases, i.e. disabled and empty.
if (this.disabledText.length > 0
&& (this.disableIfEmpty || select.prop('disabled'))
&& options.length == 0) {
return this.disabledText;
}
else if (options.length === 0) {
return this.nonSelectedText;
}
var $select = $(select);
var $optgroups = $('optgroup', $select);
var delimiter = this.delimiterText;
var text = '';
// Go through groups.
$optgroups.each(function() {
var $selectedOptions = $('option:selected', this);
var $options = $('option', this);
if ($selectedOptions.length == $options.length) {
text += $(this).attr('label') + delimiter;
}
else {
$selectedOptions.each(function() {
text += $(this).text() + delimiter;
});
}
});
var $remainingOptions = $('option:selected', $select).not('optgroup option');
$remainingOptions.each(function() {
text += $(this).text() + delimiter;
});
return text.substr(0, text.length - 2);
}
});
</code></pre>
</div>
<p>以下示例演示了如何设置<code>li.active</code>的父元素类：</p>
<div class="code-window">
<div class="code-preview">
<select id="example-selected-parents" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-selected-parents" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-css">#example-selected-parents-container label.active {
font-weight: bold;
}
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-selected-parents').multiselect({
buttonContainer: '<div id="example-selected-parents-container" class="btn-group"></div>',
onChange: function(options, selected) {
// Get checkbox corresponding to option:
var value = $(options).val();
var $input = $('#example-selected-parents-container input[value="' + value + '"]');
// Adapt label class:
if (selected) {
$input.closest('label').addClass('active');
}
else {
$input.closest('label').removeClass('active');
}
}
});
</code></pre>
</div>
<p>下面的示例演示了使用过滤器后，一旦选择了选项，便如何清除过滤。请注意，选择和取消选择选项时，都会清除过滤器。 </p>
<div class="code-window">
<div class="code-preview">
<div class="btn-group">
<select id="example-clear-after-filter-selection" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-clear-after-filter-selection" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-clear-after-filter-selection').multiselect({
buttonContainer: '<div id="example-clear-after-filter-selection-container" class="btn-group"></div>',
enableFiltering: true,
onChange: function($option) {
// Check if the filter was used.
var query = $('#example-clear-after-filter-selection-container li.multiselect-filter input').val();
if (query) {
$('#example-clear-after-filter-selection-container li.multiselect-filter input').val('').trigger('keydown');
}
}
});
</code></pre>
</div>
<p><code>.dropUp</code> 如果元素位于窗口的下边缘， 要自动添加类，请使用以下代码段： </p>
<div class="code-window">
<div class="code-preview">
<select id="example-automatic-dropup" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-automatic-dropup" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-clear-after-filter-selection').multiselect({
buttonContainer: '<div id="example-clear-after-filter-selection-container" class="btn-group"></div>',
enableFiltering: true,
onChange: function($option) {
// Check if the filter was used.
var query = $('#example-clear-after-filter-selection-container li.multiselect-filter input').val();
if (query) {
$('#example-clear-after-filter-selection-container li.multiselect-filter input').val('').trigger('keydown');
}
}
});
</code></pre>
</div>
<p>以下示例演示如何显示不带下拉列表的复选框列表：</p>
<div class="code-window">
<div class="code-preview">
<select id="example-checkbox-list" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
<pre class="line-numbers"><code class="language-html"><select id="example-checkbox-list" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</code></pre>
<pre class="line-numbers"><code class="language-css">#example-checkbox-list-container .checkbox-list > li > a {
display: block;
padding: 3px 0;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
#example-checkbox-list-container .checkbox-list > li > a:hover,
#example-checkbox-list-container .checkbox-list > li > a:focus {
color: #333;
text-decoration: none;
background-color: transparent;
}
#example-checkbox-list-container .checkbox-list > .active > a,
#example-checkbox-list-container .checkbox-list > .active > a:hover,
#example-checkbox-list-container .checkbox-list > .active > a:focus {
color: #333;
text-decoration: none;
background-color: transparent;
outline: 0;
}
#example-checkbox-list-container .checkbox-list > .disabled > a,
#example-checkbox-list-container .checkbox-list > .disabled > a:hover,
#example-checkbox-list-container .checkbox-list > .disabled > a:focus {
color: #777;
}
#example-checkbox-list-container .checkbox-list > .disabled > a:hover,
#example-checkbox-list-container .checkbox-list > .disabled > a:focus {
text-decoration: none;
cursor: unset;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
#example-checkbox-list-container .checkbox-list > li > a > label {
padding: 3px 0 3px 20px;
}
@media (min-width: 768px) {
#example-checkbox-list-container .checkbox-list > li {
float: left;
width: 33%;
}
#example-checkbox-list-container .checkbox-list-vertical > li {
float: none;
width: 100%;
}
}
#example-checkbox-list-container .multiselect-container.checkbox-list {
position: static;
}
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-checkbox-list').multiselect({
buttonContainer: '<div id="example-checkbox-list-container" class="btn-group"></div>',
buttonClass: '',
templates: {
button: '',
ul: '<ul class="multiselect-container checkbox-list"></ul>',
}
});
</code></pre>
</div>
<h5><strong>服务器端处理</strong></h5>
<p class="alert alert-warning"> 下面的示例使用PHP脚本演示服务器端处理。因此，以下示例将不会在线运行- 下载资源库并在本地服务器上尝试。 </p>
<p>为了在提交表单后接收正确的数据，使用者<code>select</code> 必须具有适当的名称。请注意，<code>[]</code>使用<code>multiple</code>选项/属性时，需要在名称后附加一个。默认情况下，不会提交多选框内使用的复选框，但是可以通过修改来更改<code>checkboxName</code>。全选选项以及用于过滤器的文本输入将不会提交。由于这可能很有用，因此可以使用该<code>selectAllName</code>选项来调整“全选” 复选框的名称。“全选”复选框的值可以由该<code>selectAllValue</code>选项控制，而其余复选框的值则<code>option</code>与原始文档的所使用的值相对应<code>select</code>. </p>
<p class="alert alert-info"> 该插件自然支持该<code>required</code> 属性。</p>
<div class="code-window">
<div class="code-preview">
<form class="form-horizontal" method="POST" action="post.php">
<div class="form-group">
<label class="col-sm-2 control-label">Multiselect</label>
<div class="col-sm-10">
<select id="example-post" name="multiselect[]" multiple="multiple" required>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Text Input</label>
<div class="col-sm-10">
<input type="text" name="text" class="form-control" placeholder="Text Input" /></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox">Checkbox</label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label>
<input type="radio" name="radio">Radio 1</label></div>
<div class="radio">
<label>
<input type="radio" name="radio">Radio 2</label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button></div>
</div>
</form>
</div>
<pre class="line-numbers"><code class="language-html"><form class="form-horizontal" method="POST" action="post.php">
<div class="form-group">
<label class="col-sm-2 control-label">Multiselect</label>
<div class="col-sm-10">
<select id="example-post" name="multiselect[]" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Text Input</label>
<div class="col-sm-10">
<input type="text" name="text" class="form-control" placeholder="Text Input" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox"> Checkbox
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label>
<input type="radio" name="radio"> Radio 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio"> Radio 2
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-post').multiselect({
includeSelectAllOption: true,
enableFiltering: true
});
</code></pre>
</div>
<p><code>checkboxName</code>选项还可以用于为分配不同的名称<code>option's</code>，例如，用于<code>optgroup</code>s. </p>
<p class="alert alert-warning"> 请注意，在下面的示例中，<code>$_POST</code> 将同时包含<code>multiselect</code> 和 <code>group1</code> 以及 <code>group2</code> 键。 </p>
<div class="code-window">
<div class="code-preview">
<form class="form-horizontal" method="POST" action="post.php">
<div class="form-group">
<label class="col-sm-2 control-label">Multiselect</label>
<div class="col-sm-10">
<select id="example-post-checkboxName" name="multiselect[]" multiple="multiple" required>
<optgroup label="Group 1" id="example-post-checkboxName-1">
<option value="1-1">Option 1.1</option>
<option value="1-2">Option 1.2</option>
<option value="1-3">Option 1.3</option>
</optgroup>
<optgroup label="Group 1" id="example-post-checkboxName-2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<pre class="line-numbers"><code class="language-html"><form class="form-horizontal" method="POST" action="post.php">
<div class="form-group">
<label class="col-sm-2 control-label">Multiselect</label>
<div class="col-sm-10">
<select id="example-post-checkboxName" name="multiselect[]" multiple="multiple" required>
<optgroup label="Group 1" id="example-post-checkboxName-1">
<option value="1-1">Option 1.1</option>
<option value="1-2">Option 1.2</option>
<option value="1-3">Option 1.3</option>
</optgroup>
<optgroup label="Group 1" id="example-post-checkboxName-2">
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</code></pre>
<pre class="line-numbers"><code class="language-javascript">$('#example-post-checkboxName').multiselect({
checkboxName: function(option) {
var $optgroup = $(option).closest('optgroup');
if ($optgroup.id == 'example-post-checkboxName-1') {
return 'group1[]';
}
else {
return 'group2[]';
}
}
});
</code></pre>
</div>
<h5><strong>键盘支持</strong></h5>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td><code>Tab</code></td>
<td>与其他表单元素一样， <code>Tab</code>用于切换到下一个表单元素。<code>Tab</code>可在下拉菜单打开或关闭时使用。</td>
</tr>
<tr>
<td><code>Enter</code></td>
<td><code>Enter</code> 用于打开下拉菜单并选择选项（对于选择选项，<code>Space</code>也可以使用）。选中多项选择后，按<code>Enter</code> 将打开下拉列表。然后，可以使用向上和向下箭头遍历选项。</td>
</tr>
<tr>
<td><code>Arrow Up/Arrow Down</code></td>
<td>打开下拉列表后用于遍历选项。可以使用 <code>Space</code> 或选择一个选项 <code>Enter</code>.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com/prism.min.js"></script><!--该JS是示例中的运行和代码展示，使用Multiselect无需引入-->
<script type="text/javascript" src="http://libs.itshubao.com/runexample/runexample.min.js"></script><!--该JS是示例中的运行和代码展示，使用Multiselect无需引入-->
<script type="text/javascript" src="http://libs.itshubao.com/bootstrap-multiselect/bootstrap-multiselect.min.js"></script>
</body>
</html>
JavaScript
$(document).ready(function() {
// 默认示例
$('#example-getting-started').multiselect();
// 第一个示例 单选
$('#example-single').multiselect();
// 第二个示例 已选中的单选
$('#example-single-selected').multiselect();
// 第三个示例 多选
$('#example-multiple-selected').multiselect();
// 第四个示例 分组
$('#example-multiple-optgroups').multiselect();
// 第五个示例 optgroups
$('#example-multiple-optgroups-classes').multiselect();
// 第六个示例 xss
$('#example-xss').multiselect();
// 第七个示例 html标签
$('#example-xss-html').multiselect({
nonSelectedText:'<span style="color:red;">Non selected ...</span>',
enableHTML:true
});
// 第八个示例 optgroup可点击
$('#example-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true
});
// 第九个示例 禁用选项一起使用
$('#example-enableClickableOptGroups-disabled').multiselect({
enableClickableOptGroups: true
});
// 第十个示例 增加onChange
$('#example-enableClickableOptGroups-onChange').multiselect({
enableClickableOptGroups: true,
onChange: function(option, checked) {
alert(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
}
});
// 第十一个示例 默认选中组
$('#example-enableClickableOptGroups-init').multiselect({
enableClickableOptGroups: true
});
// 第十二个示例 可折叠的分组
$('#example-enableCollapsibleOptGroups').multiselect({
enableCollapsibleOptGroups: true
});
// 第十三个示例 enableClickableOptGroups和enableCollapsibleOptGroups两项结合
$('#example-enableCollapsibleOptGroups-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true
});
// 第十四个示例 默认折叠
$('#example-enableCollapsibleOptGroups-collapsed').multiselect({
enableCollapsibleOptGroups: true,
buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" class="btn-group" />'
});
$('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
// 第十五个示例 enableFiltering 和结合 includeSelectAllOption
$('#example-enableCollapsibleOptGroups-enableClickableOptGroups-enableFiltering-includeSelectAllOption').multiselect({
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
enableFiltering: true,
includeSelectAllOption: true
});
// 第十六个示例 collapseOptGroupsByDefault
$('#example-collapseOptGroupsByDefault').multiselect({
enableCollapsibleOptGroups: true,
collapseOptGroupsByDefault: true
});
// 第十七个示例 disableIfEmpty
$('#example-disableIfEmpty').multiselect({
disableIfEmpty: true
});
// 第十八个示例 disabledText
$('#example-disabledText').multiselect({
disableIfEmpty: true,
disabledText: 'Disabled ...'
});
// 第十九个示例
$('#example-disabledText-disabled').multiselect({
disabledText: 'Disabled ...'
});
// 第二十个示例
$('#example-disabledText-disabled-selected').multiselect({
disabledText: 'Disabled ...'
});
// 第二十一示例 dropRight
$('#example-dropRight').multiselect({
buttonWidth: '400px',
dropRight: true
});
// 第二十二示例 dropUp
$('#example-dropUp').multiselect({
enableFiltering: true,
includeSelectAllOption: true,
maxHeight: 400,
dropUp: true
});
// 第二十三示例 maxHeight
$('#example-without-maxHeight').multiselect();
$('#example-with-maxHeight').multiselect({
maxHeight: 200
});
// 第二十四示例 checkboxName
$('#example-checkboxName').multiselect({
checkboxName: function(option) {
return 'multiselect[]';
}
});
// 第二十五示例 onChange
$('#example-onChange').multiselect({
onChange: function(option, checked, select) {
alert('Changed option ' + $(option).val() + '.');
}
});
// 第二十六示例 onInitialized
$('#example-onInitialized-button').on('click', function() {
$('#example-onInitialized').multiselect({
onInitialized: function(select, container) {
alert('Initialized.');
}
});
});
// 第二十七示例 onDropdownShow
$('#example-onDropdownShow').multiselect({
onDropdownShow: function(event) {
alert('Dropdown shown.');
}
});
// 第二十八示例 onDropdownHide
$('#example-onDropdownHide').multiselect({
onDropdownHide: function(event) {
alert('Dropdown closed.');
}
});
// 第二十九示例 onDropdownShown
$('#example-onDropdownShown').multiselect({
onDropdownShown: function(event) {
alert('Dropdown closed.');
}
});
// 第三十示例 onDropdownHidden
$('#example-onDropdownHidden').multiselect({
onDropdownHidden: function(event) {
alert('Dropdown closed.');
}
});
// 第三十一示例buttonClass
$('#example-buttonClass').multiselect({
buttonClass: 'btn btn-link'
});
// 第三十二示例 inheritClass
$('#example-inheritButton').multiselect({
inheritClass: true
});
// 第三十三示例 buttonContainer
$('#example-buttonContainer').multiselect({
buttonContainer: '<div class="btn-group" />'
});
// 第三十四示例 buttonWidth
$('#example-buttonWidth').multiselect({
buttonWidth: '400px'
});
// 第三十五示例 buttonWidth
$('#example-buttonWidth-overflow').multiselect({
buttonWidth: '150px'
});
// 第三十六示例 buttonWidth
$('#example-buttonWidth-overflow-option').multiselect({
buttonWidth: '150px'
});
// 第三十七示例 buttonText
$('#example-buttonText').multiselect({
buttonText: function(options, select) {
if (options.length === 0) {
return 'No option selected ...';
}
else if (options.length > 3) {
return 'More than 3 options selected!';
}
else {
var labels = [];
options.each(function() {
if ($(this).attr('label') !== undefined) {
labels.push($(this).attr('label'));
}
else {
labels.push($(this).html());
}
});
return labels.join(', ') + '';
}
}
});
// 第三十八示例 buttonTitle
$('#example-buttonTitle').multiselect({
buttonText: function(options, select) {
return 'Check the title!';
},
buttonTitle: function(options, select) {
var labels = [];
options.each(function () {
labels.push($(this).text());
});
return labels.join(' - ');
}
});
// 第三十九示例 nonSelectedText
$('#example-nonSelectedText').multiselect({
nonSelectedText: 'Check an option!'
});
// 第四十示例 nSelectedText
$('#example-nSelectedText').multiselect({
nSelectedText: ' - Too many options selected!'
});
// 第四十一示例 allSelectedText
$('#example-allSelectedText').multiselect({
allSelectedText: 'No option left ...'
});
// 第四十二示例 includeSelectAllOption
$('#example-allSelectedText-includeSelectAllOption').multiselect({
includeSelectAllOption: true,
allSelectedText: 'No option left ...'
});
// 第四十三示例
$('#example-allSelectedText-allSelectedText-single').multiselect({
includeSelectAllOption: true,
allSelectedText: 'No option left ...'
});
// 第四十四示例 numberDisplayed
$('#example-numberDisplayed').multiselect({
numberDisplayed: 1
});
// 第四十五示例 delimiterText
$('#example-delimiterText').multiselect({
delimiterText:'; '
});
// 第四十六示例 optionLabel
$('#example-optionLabel').multiselect({
optionLabel: function(element) {
return $(element).html() + '(' + $(element).val() + ')';
}
});
// 第四十七示例 optionClass
$('#example-optionClass').multiselect({
optionClass: function(element) {
var value = $(element).val();
if (value%2 == 0) {
return 'even';
}
else {
return 'odd';
}
}
});
// 第四十八示例 selectedClass
$('#example-selectedClass').multiselect({
buttonContainer: '<div class="btn-group" id="example-selectedClass-container"></div>',
selectedClass: 'multiselect-selected'
});
// 第四十九示例 includeSelectAllOption
$('#example-includeSelectAllOption').multiselect({
includeSelectAllOption: true
});
// 第五十示例 includeSelectAllOption
$('#example-includeSelectAllOption-optgroups').multiselect({
includeSelectAllOption: true
});
// 第五十一示例 includeSelectAllOption
$('#example-includeSelectAllOption-onChange').multiselect({
includeSelectAllOption: true,
onChange: function(option, checked) {
alert('Not triggered when clicking the select all!');
},
});
// 第五十二示例 includeSelectAllOption
$('#example-includeSelectAllOption-disbled').multiselect({
includeSelectAllOption: true
});
// 第五十三示例 selectAllJustVisible
$('#example-selectAllJustVisible').multiselect({
enableFiltering: true,
includeSelectAllOption: true,
selectAllJustVisible: false
});
// 第五十四示例
$('#example-selectAllText').multiselect({
includeSelectAllOption: true,
selectAllText: 'Check all!'
});
// 第五十五示例 selectAllValue
$('#example-selectAllValue').multiselect({
includeSelectAllOption: true,
selectAllValue: 'select-all-value'
});
// 第五十六示例 selectAllValue
$('#example-selectAllValue-numeric').multiselect({
includeSelectAllOption: true,
selectAllValue: 0
});
// 第五十七示例 selectAllName
$('#example-selectAllName').multiselect({
includeSelectAllOption: true,
selectAllName: 'select-all-name'
});
// 第五十八示例 selectAllNumber
$('#example-selectAllNumber').multiselect({
includeSelectAllOption: true,
selectAllNumber: false
});
// 第五十九示例 onSelectAll
$('#example-onSelectAll').multiselect({
includeSelectAllOption: true,
onSelectAll: function() {
alert('onSelectAll triggered!');
}
});
// 第六十示例 onDeselectAll
$('#example-onDeselectAll').multiselect({
includeSelectAllOption: true,
onDeselectAll: function() {
alert('onDeselectAll triggered!');
}
});
// 第六十一示例 enableFiltering
$('#example-enableFiltering').multiselect({
enableFiltering: true
});
// 第六十二示例 enableFiltering
$('#example-enableFiltering-includeSelectAllOption').multiselect({
includeSelectAllOption: true,
enableFiltering: true
});
// 第六十三示例 enableFiltering
$('#example-enableFiltering-optgroups').multiselect({
enableFiltering: true
});
// 第六十四示例 enableFiltering
$('#example-enableFiltering-enableClickableOptGroups').multiselect({
enableFiltering: true,
enableClickableOptGroups: true
});
// 第六十五示例 enableFiltering
$('#example-enableFiltering-onChange-onDropdownHide').multiselect({
enableFiltering: true,
onChange: function(option, checked) {
alert('onChange!');
},
onDropdownHide: function(event) {
alert('onDropdownHide!');
}
});
// 第六十六示例 enableCaseInsensitiveFiltering
$('#example-enableCaseInsensitiveFiltering').multiselect({
enableCaseInsensitiveFiltering: true
});
// 第六十七示例 enableFullValueFiltering
$('#example-enableFullValueFiltering').multiselect({
enableFiltering: true,
enableFullValueFiltering: true
});
// 第六十八示例 filterBehavior
$('#example-filterBehavior').multiselect({
enableFiltering: true,
filterBehavior: 'value'
});
// 第六十九示例 filterPlaceholder
$('#example-filter-placeholder').multiselect({
enableFiltering: true,
filterPlaceholder: 'Search for something...'
});
// 第七十示例 includeResetOption
$('#example-include-reset-option').multiselect({
includeResetOption: true
});
// 第七十一示例 includeResetDivider
$('#example-include-reset-divider').multiselect({
includeResetOption: true,
includeResetDivider: true
});
// 第七十二示例 resetText
$('#example-reset-text').multiselect({
includeResetOption: true,
resetText: "Reset all"
});
// 第七十三示例
$('#example-templates-button').multiselect({
buttonContainer: '<div></div>',
buttonClass: '',
templates: {
button: '<span class="multiselect dropdown-toggle" data-toggle="dropdown">Click me!</span>'
}
});
// 第七十四示例
$('#example-templates-input').multiselect({
templates: {
li: '<li><a><label style="display:inline;"></label><input type="text" /></a></li>'
}
});
// 第七十五示例
$('#example-destroy').multiselect();
$('#example-destroy-button').on('click', function() {
$('#example-destroy').multiselect('destroy');
});
// 第七十六示例
$('#example-refresh').multiselect();
$('#example-refresh-select').on('click', function() {
$('option[value="1"]', $('#example-refresh')).prop('selected', true);
$('option[value="3"]', $('#example-refresh')).prop('selected', true);
$('option[value="4"]', $('#example-refresh')).prop('selected', true);
alert('Option 1, 2 and 4.');
});
$('#example-refresh-deselect').on('click', function() {
$('option', $('#example-refresh')).each(function(element) {
$(this).removeAttr('selected').prop('selected', false);
});
});
$('#example-refresh-button').on('click', function() {
$('#example-refresh').multiselect('refresh');
});
// 第七十七示例
$('#example-rebuild').multiselect();
$('#example-rebuild-button').on('click', function() {
$('#example-rebuild').multiselect('rebuild');
});
$('#example-rebuild-add').on('click', function() {
$('#example-rebuild').append('<option value="add1">Addition 1</option><option value="add2">Addition 2</option><option value="add3">Addition 3</option>');
});
$('#example-rebuild-delete').on('click', function() {
$('option[value="add1"]', $('#example-rebuild')).remove();
$('option[value="add2"]', $('#example-rebuild')).remove();
$('option[value="add3"]', $('#example-rebuild')).remove();
});
// 第七十八示例
$('#example-select').multiselect();
$('#example-select-button').on('click', function() {
$('#example-select').multiselect('select', ['1', '2', '4']);
alert('Selected 1, 2 and 4.');
});
// 第七十九示例
$('#example-select-onChange').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-select-onChange-button').on('click', function() {
$('#example-select-onChange').multiselect('select', '1', true);
});
// 第八十示例
$('#example-select-onChange-array').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-select-onChange-array-button').on('click', function() {
$('#example-select-onChange-array').multiselect('select', ['1', '3'], true);
});
// 第八十一示例
$('#example-deselect').multiselect();
$('#example-deselect-button').on('click', function() {
$('#example-deselect').multiselect('deselect', ['1', '2', '4']);
alert('Deselected 1, 2 and 4.');
});
// 第八十二示例
$('#example-deselect-onChange').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-deselect-onChange-button').on('click', function() {
$('#example-deselect-onChange').multiselect('deselect', '1', true);
});
// 第八十三示例
$('#example-deselect-onChange-array').multiselect({
onChange: function(option, checked, select) {
alert('onChange triggered ...');
}
});
$('#example-deselect-onChange-array-button').on('click', function() {
$('#example-deselect-onChange-array').multiselect('deselect', '1', true);
});
// 第八十四示例
$('#example-selectAll').multiselect();
$('#example-selectAll-visible').on('click', function() {
$('#example-selectAll').multiselect('selectAll', true);
$('#example-selectAll').multiselect('updateButtonText');
});
$('#example-selectAll-all').on('click', function() {
$('#example-selectAll').multiselect('selectAll', false);
$('#example-selectAll').multiselect('updateButtonText');
});
// 第八十五示例
$('#example-deselectAll').multiselect();
$('#example-deselectAll-visible').on('click', function() {
$('#example-deselectAll').multiselect('deselectAll', true);
$('#example-deselectAll').multiselect('updateButtonText');
});
$('#example-deselectAll-all').on('click', function() {
$('#example-deselectAll').multiselect('deselectAll', false);
$('#example-deselectAll').multiselect('updateButtonText');
});
// 第八十六示例
$('#example-updateButtonText').multiselect({
buttonContainer: '<div class="btn-group" id="example-updateButtonText-container"></div>'
});
$('#example-updateButtonText-select').on('click', function() {
$('option[value="1"]', $('#example-updateButtonText')).prop('selected', true);
$('option[value="3"]', $('#example-updateButtonText')).prop('selected', true);
$('input[value="1"]', $('#example-updateButtonText-container')).prop('checked', true);
$('input[value="3"]', $('#example-updateButtonText-container')).prop('checked', true);
$('input[value="1"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
$('input[value="3"]', $('#example-updateButtonText-container')).closest('li').addClass('active');
});
$('#example-updateButtonText-update').on('click', function() {
$('#example-updateButtonText').multiselect('updateButtonText');
});
// 第八十七示例
var firstConfigurationSet = {
includeSelectAllOption: false,
enableFiltering: false
};
var secondConfigurationSet = {
includeSelectAllOption: false,
enableFiltering: true
};
var set = 1;
$('#example-setOptions').multiselect(firstConfigurationSet);
function rebuildMultiselect(options) {
$('#example-setOptions').multiselect('setOptions', options);
$('#example-setOptions').multiselect('rebuild');
}
$('#example-setOptions-button').on('click', function(event) {
switch (set) {
case 2:
rebuildMultiselect(firstConfigurationSet);
$(this).text('Configuration Set 2');
set = 1;
break;
case 1:
default:
rebuildMultiselect(secondConfigurationSet);
$(this).text('Configuration Set 1');
set = 2;
break;
}
});
// 第八十八示例
$('#example-disable').multiselect();
$('#example-disable-button').on('click', function() {
$('#example-disable').multiselect('disable');
});
// 第八十九示例
$('#example-enable').multiselect();
$('#example-enable-button').on('click', function() {
$('#example-enable').multiselect('enable');
});
// 第九十示例
$('#example-dataprovider').multiselect();
var options = [
{label: 'Option 1', title: 'Option 1', value: '1', selected: true},
{label: 'Option 2', title: 'Option 2', value: '2'},
{label: 'Option 3', title: 'Option 3', value: '3', selected: true},
{label: 'Option 4', title: 'Option 4', value: '4'},
{label: 'Option 5', title: 'Option 5', value: '5'},
{label: 'Option 6', title: 'Option 6', value: '6', disabled: true}
];
$('#example-dataprovider').multiselect('dataprovider', options);
// 第九十一示例
$('#example-dataprovider-optgroups').multiselect();
var optgroups = [
{
label: 'Group 1', children: [
{label: 'Option 1.1', value: '1-1', selected: true},
{label: 'Option 1.2', value: '1-2'},
{label: 'Option 1.3', value: '1-3'}
]
},
{
label: 'Group 2', children: [
{label: 'Option 2.1', value: '1'},
{label: 'Option 2.2', value: '2'},
{label: 'Option 2.3', value: '3', disabled: true}
]
}
];
$('#example-dataprovider-optgroups').multiselect('dataprovider', optgroups);
// 第九十二示例
$('#example-dataprovider-data-attributes').multiselect();
var optionsData =[
{
"label": "Option 1",
"value": 1,
"selected": true,
"attributes": {
"some-attribute": 1,
"another-attribute": false
}
},
{
"label": "Option 2",
"value": 2,
"selected": false,
"attributes": {
"some-attribute": 2
}
}
];
$("#example-dataprovider-data-attributes").multiselect('dataprovider', optionsData);
// 第九十三示例
$('#example-set-all-selected-text').multiselect({allSelectedText: "Initial All Selected"});
$('#new-all-selected-text-btn').click(function(){
$('#example-set-all-selected-text').multiselect('setAllSelectedText', $('#new-all-selected-text-box').val());
});
// 第九十四示例
$('#example-confirmation').multiselect({
onChange: function(element, checked) {
if (checked === true) {
//action taken here if true
}
else if (checked === false) {
if (confirm('Do you wish to deselect the element?')) {
//action taken here
}
else {
$("#example-confirmation").multiselect('select', element.val());
}
}
}
});
// 第九十五示例
var lastSelected = $('#example-confirmation-single option:selected').val();
$('#example-confirmation-single').multiselect({
onChange: function(element, checked) {
if (confirm('Do you wish to change the selection?')) {
lastSelected = element.val();
}
else {
$("#example-confirmation-single").multiselect('select', lastSelected);
$("#example-confirmation-single").multiselect('deselect', element.val());
}
}
});
// 第九十六示例
$('#example-limit').multiselect({
onChange: function(option, checked) {
// Get selected options.
var selectedOptions = $('#example-limit option:selected');
if (selectedOptions.length >= 4) {
// Disable all other checkboxes.
var nonSelectedOptions = $('#example-limit option').filter(function() {
return !$(this).is(':selected');
});
nonSelectedOptions.each(function() {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', true);
input.parent('li').addClass('disabled');
});
}
else {
// Enable all checkboxes.
$('#example-limit option').each(function() {
var input = $('input[value="' + $(this).val() + '"]');
input.prop('disabled', false);
input.parent('li').addClass('disabled');
});
}
}
});
// 第九十七示例
var orderCount = 0;
$('#example-order').multiselect({
onChange: function(option, checked) {
if (checked) {
orderCount++;
$(option).data('order', orderCount);
}
else {
$(option).data('order', '');
}
},
buttonText: function(options) {
if (options.length === 0) {
return 'None selected';
}
else if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = [];
options.each(function() {
selected.push([$(this).text(), $(this).data('order')]);
});
selected.sort(function(a, b) {
return a[1] - b[1];
});
var text = '';
for (var i = 0; i < selected.length; i++) {
text += selected[i][0] + ', ';
}
return text.substr(0, text.length -2);
}
},
});
$('#example-order-button').on('click', function() {
var selected = [];
$('#example-order option:selected').each(function() {
selected.push([$(this).val(), $(this).data('order')]);
});
selected.sort(function(a, b) {
return a[1] - b[1];
});
var text = '';
for (var i = 0; i < selected.length; i++) {
text += selected[i][0] + ', ';
}
text = text.substring(0, text.length - 2);
alert(text);
});
// 第九十八示例
$('#example-simulate-single').multiselect({
onChange: function(option, checked) {
var values = [];
$('#example-simulate-single option').each(function() {
if ($(this).val() !== option.val()) {
values.push($(this).val());
}
});
$('#example-simulate-single').multiselect('deselect', values);
}
});
// 第九十九示例
$('#example-reset').multiselect();
$('#example-reset-form').on('reset', function() {
$('#example-reset option:selected').each(function() {
$(this).prop('selected', false);
})
$('#example-reset').multiselect('refresh');
});
// 第一百示例
$('#example-modal').multiselect();
// 第一百零一示例
$('#example-collapse').multiselect();
// 第一百零二示例
$('#example-large-enable').on('click', function() {
var options = $('#example-large-options').val();
if (options < 1 || options > 5000) {
$('#example-large-error').html('<p class="alert alert-error">Choose between 1 and 5000 options!</p>');
}
else {
$('#example-large-includeSelectAllOption').html('');
$('#example-large-includeSelectAllOption-enableFiltering').html('');
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').html('');
$('#example-large-reset').html('');
for (var j = 0; j < options; j++) {
i = j + 1;
$('#example-large-includeSelectAllOption').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
$('#example-large-includeSelectAllOption-enableFiltering').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
var group = Math.floor(j/10) + 1;
var number = j % 10 + 1;
if (number === 1) {
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<optgroup label="Group ' + group.toString() + '"></optgroup>');
}
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').append('<option value="' + group.toString() + '-' + number.toString() + '">Option ' + group.toString() + '.' + number.toString() + '</option>');
$('#example-large-reset').append('<option value="' + i.toString() + '">Option ' + i.toString() + '</option>');
}
$('#example-large-includeSelectAllOption').multiselect({
maxHeight: 200,
includeSelectAllOption: true
});
$('#example-large-includeSelectAllOption-enableFiltering').multiselect({
maxHeight: 200,
includeSelectAllOption: true,
enableFiltering: true
});
$('#example-large-includeSelectAllOption-enableFiltering-enableClickableOptGroups').multiselect({
maxHeight: 200,
includeSelectAllOption: true,
enableFiltering: true,
enableClickableOptGroups: true
});
$('#example-large-reset').multiselect({
maxHeight: 200,
includeSelectAllOption: true
});
$('#example-large-reset-form').on('reset', function() {
$('#example-large-reset').multiselect('deselectAll', false);
$('#example-large-reset').multiselect('updateButtonText');
});
}
});
// 第一百零三示例
var data = [];
for (var i = 0; i < 100; i++) {
var group = {label: 'Group ' + (i + 1), children: []};
for (var j = 0; j < 10; j++) {
group['children'].push({
label: 'Option ' + (i + 1) + '.' + (j + 1),
value: i + '-' + j
});
}
data.push(group);
}
$('#example-large-dataprovider-button').on('click', function() {
$('#example-large-dataprovider').multiselect({
maxHeight: 200
});
$('#example-large-dataprovider').multiselect('dataprovider', data);
});
// 第一百零四示例
$('#example-disable-javascript').multiselect({
includeSelectAllOption: true
});
$('#example-disable-javascript-disable').on('click', function() {
var input = $('#example-disable-javascript-container input[value="3"]');
var option = $('#example-disable-javascript-container option[value="3"]');
input.prop('disabled', true);
option.prop('disabled', true);
input.parent('label').parent('a').parent('li').addClass('disabled');
});
$('#example-disable-javascript-check').on('click', function() {
var options = '';
$('#example-disable-javascript option:selected').each(function() {
options += $(this).val() + ', ';
});
alert(options.substr(0, options.length - 2));
});
// 第一百零五示例
$('#example-large-refresh-button').on('click', function() {
for (var i = 0; i < 1000; i++) {
$('#example-large-refresh').append('<option value="' + i + '">Option ' + i + '</option>');
}
$('#example-large-refresh').multiselect();
});
$('#example-large-refresh-refresh').on('click', function() {
$('#example-large-refresh').multiselect('refresh');
});
$('#example-large-refresh-select').on('click', function() {
var count = 0;
$('#example-large-refresh option').each(function() {
var i = $(this).val();
if (i%2 == 0) {
$(this).prop('selected', true);
count++;
}
});
alert('Selected ' + count + ' options!');
});
// 第一百零六示例
$('#example-optgroup-limit').multiselect({
onChange: function(options, checked) {
var $option = $(options);
if ($option.length == 1) {
var $group = $option.parent('optgroup')
if ($group.hasClass('group-1')) {
var $options = $('option', $group);
$options = $options.filter(':selected');
if (checked && $options.length > 2) {
alert('Cannot select more than 2 elements in this group!');
$("#example-optgroup-limit").multiselect('deselect', $option.val());
}
}
}
}
});
// 第一百零七示例
$('#example-optgroup-buttonText').multiselect({
buttonText: function(options, select) {
// First consider the simple cases, i.e. disabled and empty.
if (this.disabledText.length > 0
&& (this.disableIfEmpty || select.prop('disabled'))
&& options.length == 0) {
return this.disabledText;
}
else if (options.length === 0) {
return this.nonSelectedText;
}
var $select = $(select);
var $optgroups = $('optgroup', $select);
var delimiter = this.delimiterText;
var text = '';
// Go through groups.
$optgroups.each(function() {
var $selectedOptions = $('option:selected', this);
var $options = $('option', this);
if ($selectedOptions.length == $options.length) {
text += $(this).attr('label') + delimiter;
}
else {
$selectedOptions.each(function() {
text += $(this).text() + delimiter;
});
}
});
var $remainingOptions = $('option:selected', $select).not('optgroup option');
$remainingOptions.each(function() {
text += $(this).text() + delimiter;
});
return text.substr(0, text.length - 2);
}
});
// 第一百零八示例
$('#example-selected-parents').multiselect({
buttonContainer: '<div id="example-selected-parents-container" class="btn-group"></div>',
onChange: function(options, selected) {
// Get checkbox corresponding to option:
var value = $(options).val();
var $input = $('#example-selected-parents-container input[value="' + value + '"]');
// Adapt label class:
if (selected) {
$input.closest('label').addClass('active');
}
else {
$input.closest('label').removeClass('active');
}
}
});
// 第一百零九示例
$('#example-clear-after-filter-selection').multiselect({
buttonContainer: '<div id="example-clear-after-filter-selection-container" class="btn-group"></div>',
enableFiltering: true,
onChange: function($option) {
// Check if the filter was used.
var query = $('#example-clear-after-filter-selection-container li.multiselect-filter input').val();
if (query) {
$('#example-clear-after-filter-selection-container li.multiselect-filter input').val('').trigger('keydown');
}
}
});
// 第一百一十示例
$('#example-automatic-dropup').multiselect({
buttonContainer: '<div id="example-automatic-dropup-container" class="btn-group"></div>',
maxHeight: 200,
});
$(window).scroll(function() {
var top = $('#example-automatic-dropup-container')[0].getBoundingClientRect().top
var bottom = $(window).height() - top - $('#example-automatic-dropup-container').height();
if (bottom < 250) {
$('#example-automatic-dropup-container').addClass('dropup');
}
if (bottom > 250) {
$('#example-automatic-dropup-container').removeClass('dropup');
}
});
// 第一百一十一示例
$('#example-checkbox-list').multiselect({
buttonContainer: '<div id="example-checkbox-list-container" class="btn-group"></div>',
buttonClass: '',
templates: {
button: '',
ul: '<ul class="multiselect-container checkbox-list"></ul>',
}
});
// 第一百一十二示例
$('#example-post').multiselect({
includeSelectAllOption: true,
enableFiltering: true
});
// 第一百一十三示例
$('#example-post-checkboxName').multiselect({
checkboxName: function(option) {
var $optgroup = $(option).closest('optgroup');
if ($optgroup.id == 'example-post-checkboxName-1') {
return 'group1[]';
}
else {
return 'group2[]';
}
}
});
});