Skip to content

B
bootstrap-multiselect
Commit da226707 authored by David Stutz's avatar David Stutz
Browse files
Options

Fixed #578: disabledText option including documentation.

parent e5f768c1
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 16 deletions
dist/js/bootstrap-multiselect.js
View file @ da226707
......@@ -230,13 +230,19 @@
* @returns {String}
*/
buttonText: function(options, select) {
if (options.length === 0) {
if (this.disabledText.length > 0
&& (this.disableIfEmpty || select.prop('disabled'))
&& options.length == 0) {
return this.disabledText;
}
else if (options.length === 0) {
return this.nonSelectedText;
}
else if (this.allSelectedText
&& options.length === $('option', $(select)).length
&& $('option', $(select)).length !== 1
&& this.multiple) {
&& options.length === $('option', $(select)).length
&& $('option', $(select)).length !== 1
&& this.multiple) {
if (this.selectAllNumber) {
return this.allSelectedText + ' (' + options.length + ')';
......@@ -390,6 +396,7 @@
allSelectedText: 'All selected',
numberDisplayed: 3,
disableIfEmpty: false,
disabledText: '',
delimiterText: ', ',
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
......
index.html
View file @ da226707
......@@ -175,59 +175,60 @@
<tr>
<td><a href="#configuration-options-maxHeight"><code>maxHeight</code></a></td>
<td><a href="#configuration-options-disableIfEmpty"><code>disableIfEmpty</code></a></td>
<td><a href="#configuration-options-onChange"><code>onChange</code></a></td>
</tr>
<td><a href="#configuration-options-disabledText"><code>disabledText</code></a>
<tr>
<tr>
<td><a href="#configuration-options-onChange"><code>onChange</code></a></td>
<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-onDropdownHide"><code>onDropdownHide</code></a></td>
<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-buttonClass"><code>buttonClass</code></a></td>
<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-buttonWidth"><code>buttonWidth</code></a></td>
<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-nonSelectedText"><code>nonSelectedText</code></a></td>
<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-numberDisplayed"><code>numberDisplayed</code></a></td>
<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-optionClass"><code>optionClass</code></a></td>
<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-selectAllJustVisible"><code>selectAllJustVisible</code></a></td>
<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-selectAllName"><code>selectAllName</code></a></td>
<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-enableFiltering"><code>enableFiltering</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>
<td><a href="#configuration-options-filterBehavior"><code>filterBehavior</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>
</tr>
</tbody>
......@@ -662,6 +663,120 @@
});
});
&lt;/script&gt;
</pre>
</div>
</td>
</tr>
<tr>
<td><code id="configuration-options-disableIfEmpty">disabledText</code></td>
<td>
<p>
The text shown if the multiselect is disabled. Note that this option is set to the empty string <code>''</code> by default, that is <code>nonSelectedText</code> is shown if the multiselect is disabled and no options are selected.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-disabledText').multiselect({
disableIfEmpty: true,
disabledText: 'Disabled ...'
});
});
</script>
<select id="example-disabledText" multiple="multiple"></select>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-disabledText').multiselect({
disableIfEmpty: true,
disabledText: 'Disabled ...'
});
});
&lt;/script&gt;
</pre>
</div>
<p>
The <code>disabledText</code> option does also work when the underlying <code>select</code> is disabled:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-disabledText-disabled').multiselect({
disabledText: 'Disabled ...'
});
});
</script>
<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>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-disabledText-disabled').multiselect({
disabledText: 'Disabled ...'
});
});
&lt;/script&gt;
&lt;select id=&quot;example-disabledText-disabled&quot; multiple=&quot;multiple&quot; disabled=&quot;disabled&quot;&gt;
&lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
&lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
&lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
&lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
&lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</pre>
</div>
<p>
Note that selected options will still be shown:
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-disabledText-disabled-selected').multiselect({
disabledText: 'Disabled ...'
});
});
</script>
<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>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$('#example-disabledText-disabled-selected').multiselect({
disabledText: 'Disabled ...'
});
});
&lt;/script&gt;
&lt;select id=&quot;example-disabledText-disabled-selected&quot; multiple=&quot;multiple&quot; disabled=&quot;disabled&quot;&gt;
&lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
&lt;option value=&quot;2&quot; selected=&quot;selected&quot;&gt;Option 2&lt;/option&gt;
&lt;option value=&quot;3&quot; selected=&quot;selected&quot;&gt;Option 3&lt;/option&gt;
&lt;option value=&quot;4&quot;&gt;Option 4&lt;/option&gt;
&lt;option value=&quot;5&quot;&gt;Option 5&lt;/option&gt;
&lt;option value=&quot;6&quot;&gt;Option 6&lt;/option&gt;
&lt;/select&gt;
</pre>
</div>
</td>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment