Skip to content

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

#270, #263, #260, #262, #261, #235. New option: includeSelectAllIfMoreThan.... 

#270, #263, #260, #262, #261, #235. New option: includeSelectAllIfMoreThan. Fixed issues with select all and dividers. Updated documentation concerning show/hide event.
parent bc9a8f2b
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 20 deletions
README.md
View file @ 49e25ebc
...@@ -16,8 +16,9 @@ Every pull request is appreciated. To make it easier for me to merge fixes and n ...@@ -16,8 +16,9 @@ Every pull request is appreciated. To make it easier for me to merge fixes and n
* Include documentation for new options and features to avoid undocumented features. * Include documentation for new options and features to avoid undocumented features.
* Add a thorough description to every pull request - so I am able to understand the purpose of the pull request. * Add a thorough description to every pull request - so I am able to understand the purpose of the pull request.
* Have a look at the code as to keep the code as comprehensible and coherent as possible (concerning code style, indentation etc.). * Have a look at the code as to keep the code as comprehensible and coherent as possible (concerning code style, indentation etc. ...).
* Add comments to your code - to help me understand the committed code. * Add comments to your code - to help me understand the committed code.
* Add a single pull request per fix or feature you add.
## License ## License
......
index-2-3.html
View file @ 49e25ebc
...@@ -736,7 +736,12 @@ ...@@ -736,7 +736,12 @@
<tr> <tr>
<td><code>onDropdownShow</code></td> <td><code>onDropdownShow</code></td>
<td> <td>
This event handler is triggered when the dropdown are shown. <p>
<span class="text-error">Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.</span>
</p>
<p>
<span class="muted">This event handler is triggered when the dropdown are shown.</span>
</p>
</td> </td>
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -755,7 +760,12 @@ ...@@ -755,7 +760,12 @@
<tr> <tr>
<td><code>onDropdownHide</code></td> <td><code>onDropdownHide</code></td>
<td> <td>
This event handler is triggered when the dropdown are hidden. <p>
<span class="text-error">Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.</span>
</p>
<p>
<span class="muted">This event handler is triggered when the dropdown are hidden.</span>
</p>
</td> </td>
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -801,6 +811,24 @@ ...@@ -801,6 +811,24 @@
includeSelectAllOption: true includeSelectAllOption: true
}); });
}); });
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>includeSelectAllIfMoreThan</code></td>
<td>
If <code>includeSelectAllOption</code> is set to <code>true</code>, the select all option will be added if more than <code>includeSelectAllIfMoreThan</code> options are present. By default this option is set to <code>0</code>.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
includeSelectAllOption: true,
includeSelectAllIfMoreThan: 10
});
});
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -1647,7 +1675,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1647,7 +1675,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
} }
else { else {
$(&quot;#example22&quot;).multiselect('select', element.val()); $(&quot;#example22&quot;).multiselect('select', element.val());
return false;
} }
} }
} }
...@@ -2088,6 +2115,14 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2088,6 +2115,14 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<p> <p>
With version 2.0, jQuery no longer supports the older IE versions. Nevertheless, the plugin should run as expected using the 1.x branch of jQuery. See <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/">here</a> for details. With version 2.0, jQuery no longer supports the older IE versions. Nevertheless, the plugin should run as expected using the 1.x branch of jQuery. See <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/">here</a> for details.
</p> </p>
<p>
<b>Using <code>return false;</code> within the <code>onChange</code> option does not prevent the option from being selected/deselected ...</b>
</p>
<p>
The <code>return</code> statement within the <code>onChange</code> method has no influence on the result. For preventing an option from being deselected or selected have a look at the examples in the <a href="#further-examples">Further Examples</a> section.
</p>
</div> </div>
<div class="container"> <div class="container">
......
index.html
View file @ 49e25ebc
...@@ -194,6 +194,15 @@ ...@@ -194,6 +194,15 @@
$('#example41').multiselect({ $('#example41').multiselect({
includeSelectAllOption: true includeSelectAllOption: true
}); });
$('#example44').multiselect({
onDropdownShow: function() {
alert('Dropdown shown!');
},
onDropdownHide: function() {
alert('Dropdown hidden ...');
}
});
}); });
</script> </script>
<p> <p>
...@@ -543,6 +552,21 @@ ...@@ -543,6 +552,21 @@
Using <code>optgroup</code> with filtering and the select all option. Using <code>optgroup</code> with filtering and the select all option.
</td> </td>
</tr> </tr>
<tr>
<td>
<select id="example44" 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>
</td>
<td>
The <code>onDropdownShow</code> and <code>onDropdownHide</code> represent the <code>show.bs.dropdown</code> and <code>hide.bs.dropdown</code> events provided by Twitter Bootstrap.
</td>
</tr>
</table> </table>
<div class="page-header"> <div class="page-header">
...@@ -737,7 +761,12 @@ ...@@ -737,7 +761,12 @@
<tr> <tr>
<td><code>onDropdownShow</code></td> <td><code>onDropdownShow</code></td>
<td> <td>
This event handler is triggered when the dropdown are shown. <p>
This event handler is triggered when the dropdown are shown.
</p>
<p>
<span class="text-warning">Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.</span>
</p>
</td> </td>
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -756,7 +785,12 @@ ...@@ -756,7 +785,12 @@
<tr> <tr>
<td><code>onDropdownHide</code></td> <td><code>onDropdownHide</code></td>
<td> <td>
This event handler is triggered when the dropdown are hidden. <p>
This event handler is triggered when the dropdown are hidden.
</p>
<p>
<span class="text-warning">Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.</span>
</p>
</td> </td>
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -802,6 +836,24 @@ ...@@ -802,6 +836,24 @@
includeSelectAllOption: true includeSelectAllOption: true
}); });
}); });
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>includeSelectAllIfMoreThan</code></td>
<td>
If <code>includeSelectAllOption</code> is set to <code>true</code>, the select all option will be added if more than <code>includeSelectAllIfMoreThan</code> options are present. By default this option is set to <code>0</code>.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
includeSelectAllOption: true,
includeSelectAllIfMoreThan: 10
});
});
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -1666,7 +1718,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1666,7 +1718,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
} }
else { else {
$(&quot;#example22&quot;).multiselect('select', element.val()); $(&quot;#example22&quot;).multiselect('select', element.val());
return false;
} }
} }
} }
...@@ -2107,6 +2158,14 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2107,6 +2158,14 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<p> <p>
With version 2.0, jQuery no longer supports the older IE versions. Nevertheless, the plugin should run as expected using the 1.x branch of jQuery. See <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/">here</a> for details. With version 2.0, jQuery no longer supports the older IE versions. Nevertheless, the plugin should run as expected using the 1.x branch of jQuery. See <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/">here</a> for details.
</p> </p>
<p>
<b>Using <code>return false;</code> within the <code>onChange</code> option does not prevent the option from being selected/deselected ...</b>
</p>
<p>
The <code>return</code> statement within the <code>onChange</code> method has no influence on the result. For preventing an option from being deselected or selected have a look at the examples in the <a href="#further-examples">Further Examples</a> section.
</p>
</div> </div>
<div class="container"> <div class="container">
......
js/bootstrap-multiselect.js
View file @ 49e25ebc
...@@ -181,7 +181,7 @@ ...@@ -181,7 +181,7 @@
* @param {jQuery} event * @param {jQuery} event
*/ */
onDropdownShow: function(event) { onDropdownShow: function(event) {
}, },
/** /**
* Triggered when the dropdown is hidden. * Triggered when the dropdown is hidden.
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
* @param {jQuery} event * @param {jQuery} event
*/ */
onDropdownHide: function(event) { onDropdownHide: function(event) {
}, },
buttonClass: 'btn btn-default', buttonClass: 'btn btn-default',
dropRight: false, dropRight: false,
...@@ -200,6 +200,7 @@ ...@@ -200,6 +200,7 @@
// If maximum height is exceeded a scrollbar will be displayed. // If maximum height is exceeded a scrollbar will be displayed.
maxHeight: false, maxHeight: false,
includeSelectAllOption: false, includeSelectAllOption: false,
includeSelectAllIfMoreThan: 0,
selectAllText: ' Select all', selectAllText: ' Select all',
selectAllValue: 'multiselect-all', selectAllValue: 'multiselect-all',
enableFiltering: false, enableFiltering: false,
...@@ -248,7 +249,7 @@ ...@@ -248,7 +249,7 @@
} }
// Manually add button width if set. // Manually add button width if set.
if (this.options.buttonWidth && this.options.buttonWidth != 'auto') { if (this.options.buttonWidth && this.options.buttonWidth !== 'auto') {
this.$button.css({ this.$button.css({
'width' : this.options.buttonWidth 'width' : this.options.buttonWidth
}); });
...@@ -343,13 +344,15 @@ ...@@ -343,13 +344,15 @@
if (isSelectAllOption) { if (isSelectAllOption) {
if (this.$select[0][0].value === this.options.selectAllValue) { if (this.$select[0][0].value === this.options.selectAllValue) {
var values = []; var values = [];
var options = $('option[value!="' + this.options.selectAllValue + '"]', this.$select);
// Check for visibility of options.
var options = $('option[value!="' + this.options.selectAllValue + '"][data-role!="divider"]', this.$select)
.filter(':visible');
for (var i = 0; i < options.length; i++) { for (var i = 0; i < options.length; i++) {
// Additionally check whether the option is visible within the dropcown. values.push(options[i].value);
if (options[i].value !== this.options.selectAllValue && this.getInputByValue(options[i].value).is(':visible')) {
values.push(options[i].value);
}
} }
if (checked) { if (checked) {
...@@ -573,11 +576,14 @@ ...@@ -573,11 +576,14 @@
buildSelectAll: function() { buildSelectAll: function() {
var alreadyHasSelectAll = this.hasSelectAll(); var alreadyHasSelectAll = this.hasSelectAll();
// If options.includeSelectAllOption === true, add the include all checkbox. if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple
if (this.options.includeSelectAllOption && this.options.multiple && !alreadyHasSelectAll) { && $('option[data-role!="divider"]', this.$select).length > this.options.includeSelectAllIfMoreThan) {
// Check whether to add a divider after the select all.
if (this.options.includeSelectAllDivider) { if (this.options.includeSelectAllDivider) {
this.$select.prepend('<option value="" disabled="disabled" data-role="divider">'); this.$select.prepend('<option value="" disabled="disabled" data-role="divider">');
} }
this.$select.prepend('<option value="' + this.options.selectAllValue + '">' + this.options.selectAllText + '</option>'); this.$select.prepend('<option value="' + this.options.selectAllValue + '">' + this.options.selectAllText + '</option>');
} }
}, },
...@@ -706,7 +712,7 @@ ...@@ -706,7 +712,7 @@
* @param {Array} selectValues * @param {Array} selectValues
*/ */
select: function(selectValues) { select: function(selectValues) {
if(selectValues && !$.isArray(selectValues)) { if(!$.isArray(selectValues)) {
selectValues = [selectValues]; selectValues = [selectValues];
} }
...@@ -755,7 +761,7 @@ ...@@ -755,7 +761,7 @@
* @param {Array} deselectValues * @param {Array} deselectValues
*/ */
deselect: function(deselectValues) { deselect: function(deselectValues) {
if(deselectValues && !$.isArray(deselectValues)) { if(!$.isArray(deselectValues)) {
deselectValues = [deselectValues]; deselectValues = [deselectValues];
} }
...@@ -857,7 +863,7 @@ ...@@ -857,7 +863,7 @@
* @returns {Boolean} * @returns {Boolean}
*/ */
hasSelectAll: function() { hasSelectAll: function() {
return this.$select[0][0] ? this.$select[0][0].value === this.options.selectAllValue : false; return $('input[value="' + this.options.selectAllValue + '"]', this.$ul).length > 0;
}, },
/** /**
......
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