Skip to content

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

Indentation and formatting again....

parent e50b62f2
Show whitespace changes
Inline Side-by-side
Showing with 1577 additions and 1582 deletions
README.md
View file @ aefeff49
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes. Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
Bootstrap 3 port by [Eduard Dudar](https://github.com/edudar).
## Documentation ## Documentation
Documentation, demonstrations and FAQ: [http://davidstutz.github.com/bootstrap-multiselect/](http://davidstutz.github.com/bootstrap-multiselect/). Documentation, demonstrations and FAQ: [http://davidstutz.github.com/bootstrap-multiselect/](http://davidstutz.github.com/bootstrap-multiselect/).
...@@ -16,10 +14,14 @@ Every pull request is appreciated. To make it easier for me to merge fixes and n ...@@ -16,10 +14,14 @@ 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. ...) - **a tab should resemble four whitespaces**.
* 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. * Add a single pull request per fix or feature you add.
## Contributors
For a full list of contributors see [https://github.com/davidstutz/bootstrap-multiselect/graphs/contributors](https://github.com/davidstutz/bootstrap-multiselect/graphs/contributors).
## License ## License
This project is dual licensed under the Apache License, Version 2.0 and the BSD 3-Clause license. This project is dual licensed under the Apache License, Version 2.0 and the BSD 3-Clause license.
......
index-2-3.html
View file @ aefeff49
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<title>Bootstrap Multiselect</title> <title>Bootstrap Multiselect</title>
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="copyright" content="David Stutz" />
<link rel="stylesheet" href="css/bootstrap-2.3.2.min.css" type="text/css"> <link rel="stylesheet" href="css/bootstrap-2.3.2.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
...@@ -76,19 +75,19 @@ ...@@ -76,19 +75,19 @@
&lt;!-- Build your select: --&gt; &lt;!-- Build your select: --&gt;
&lt;select class=&quot;multiselect&quot; multiple=&quot;multiple&quot;&gt; &lt;select class=&quot;multiselect&quot; multiple=&quot;multiple&quot;&gt;
&lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt; &lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt;
&lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt; &lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt;
&lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt; &lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt;
&lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt; &lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt;
&lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt; &lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt;
&lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt; &lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt;
&lt;/select&gt; &lt;/select&gt;
&lt;!-- Initialize the plugin: --&gt; &lt;!-- Initialize the plugin: --&gt;
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect(); $(&#39;.multiselect&#39;).multiselect();
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
...@@ -209,6 +208,7 @@ ...@@ -209,6 +208,7 @@
}); });
}); });
</script> </script>
<p> <p>
The best way learning from the examples is using firebug, chrome developer tools or similar tools for your browser. Examine the generated markup and used javascript code. The best way learning from the examples is using firebug, chrome developer tools or similar tools for your browser. Examine the generated markup and used javascript code.
</p> </p>
...@@ -600,7 +600,7 @@ ...@@ -600,7 +600,7 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
buttonText: function(options, select) { buttonText: function(options, select) {
if (options.length == 0) { if (options.length == 0) {
...@@ -622,7 +622,7 @@ ...@@ -622,7 +622,7 @@
} }
} }
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -633,11 +633,11 @@ ...@@ -633,11 +633,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
numberDisplayed: 4 numberDisplayed: 4
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -647,13 +647,13 @@ ...@@ -647,13 +647,13 @@
<td>A string that is displayed when no options are selected.</td> <td>A string that is displayed when no options are selected.</td>
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
nonSelectedText: 'You have not selected any options' nonSelectedText: 'You have not selected any options'
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
</tr> </tr>
...@@ -663,7 +663,7 @@ ...@@ -663,7 +663,7 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&apos;.multiselect&apos;).multiselect({ $(&apos;.multiselect&apos;).multiselect({
buttonTitle: function(options, select) { buttonTitle: function(options, select) {
var selected = &apos;&apos;; var selected = &apos;&apos;;
...@@ -673,7 +673,7 @@ ...@@ -673,7 +673,7 @@
return selected.substr(0, selected.length - 2); return selected.substr(0, selected.length - 2);
}, },
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -684,11 +684,11 @@ ...@@ -684,11 +684,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
buttonClass: &apos;btn-primary btn-lg&apos; buttonClass: &apos;btn-primary btn-lg&apos;
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -708,11 +708,11 @@ ...@@ -708,11 +708,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
buttonWidth: &apos;300px&apos; buttonWidth: &apos;300px&apos;
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -725,11 +725,11 @@ ...@@ -725,11 +725,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos; buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos;
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -740,13 +740,13 @@ ...@@ -740,13 +740,13 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
label: function(element) { label: function(element) {
return $(element).html()+&#39; (&#39;+$(element).val()+&#39;)&#39;; return $(element).html()+&#39; (&#39;+$(element).val()+&#39;)&#39;;
} }
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -757,11 +757,11 @@ ...@@ -757,11 +757,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
selectedClass: null selectedClass: null
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -774,13 +774,13 @@ ...@@ -774,13 +774,13 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
onChange: function(element, checked) { onChange: function(element, checked) {
alert(&apos;Change event invoked!&apos;); alert(&apos;Change event invoked!&apos;);
} }
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -798,13 +798,13 @@ ...@@ -798,13 +798,13 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
onDropdownShow: function(event) { onDropdownShow: function(event) {
alert(&apos;Show event invoked!&apos;); alert(&apos;Show event invoked!&apos;);
} }
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -822,13 +822,13 @@ ...@@ -822,13 +822,13 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
onDropdownHide: function(event) { onDropdownHide: function(event) {
alert(&apos;Hide event invoked!&apos;); alert(&apos;Hide event invoked!&apos;);
} }
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -841,11 +841,11 @@ ...@@ -841,11 +841,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
maxHeight: 400 maxHeight: 400
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -858,11 +858,11 @@ ...@@ -858,11 +858,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
includeSelectAllOption: true includeSelectAllOption: true
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -875,12 +875,12 @@ ...@@ -875,12 +875,12 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
includeSelectAllOption: true, includeSelectAllOption: true,
includeSelectAllIfMoreThan: 10 includeSelectAllIfMoreThan: 10
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -893,11 +893,11 @@ ...@@ -893,11 +893,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
selectAllText: true selectAllText: true
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -910,11 +910,11 @@ ...@@ -910,11 +910,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
selectAllValue: 'multiselect-all', selectAllValue: 'multiselect-all',
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -927,11 +927,11 @@ ...@@ -927,11 +927,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
enableFiltering: true enableFiltering: true
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -944,12 +944,12 @@ ...@@ -944,12 +944,12 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
enableFiltering: true, enableFiltering: true,
filterBehavior: 'both' filterBehavior: 'both'
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -962,11 +962,11 @@ ...@@ -962,11 +962,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
enableCaseInsensitiveFiltering: true enableCaseInsensitiveFiltering: true
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -979,11 +979,11 @@ ...@@ -979,11 +979,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
filterPlaceholder: &apos;Search&apos; filterPlaceholder: &apos;Search&apos;
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -996,11 +996,11 @@ ...@@ -996,11 +996,11 @@
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
dropRight: true dropRight: true
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -1059,13 +1059,13 @@ templates: { ...@@ -1059,13 +1059,13 @@ templates: {
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
templates: { templates: {
divider: '&lt;div class="divider" data-role="divider"&gt;&lt;/div&gt;' divider: '&lt;div class="divider" data-role="divider"&gt;&lt;/div&gt;'
} }
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -1621,6 +1621,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1621,6 +1621,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
}); });
}); });
</script> </script>
<table class="table table-striped"> <table class="table table-striped">
<tbody> <tbody>
<tr> <tr>
...@@ -1646,21 +1647,21 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1646,21 +1647,21 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td width="60%"> <td width="60%">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$('#example34').multiselect(); $('#example34').multiselect();
$('#example34-select').on('click', function() { $('#example34-select').on('click', function() {
$('#example34').multiselect('select', 'cheese'); $('#example34').multiselect('select', 'cheese');
$('#example34').multiselect('select', 'tomatoes'); $('#example34').multiselect('select', 'tomatoes');
}); });
$('#example34-deselect').on('click', function() { $('#example34-deselect').on('click', function() {
$('#example34').multiselect('deselect', 'cheese'); $('#example34').multiselect('deselect', 'cheese');
$('#example34').multiselect('deselect', 'tomatoes'); $('#example34').multiselect('deselect', 'tomatoes');
}); });
$('#example34-values').on('click', function() { $('#example34-values').on('click', function() {
$('#example34-text').text('Selected: ' + $('#example34').val()).addClass('alert alert-info'); $('#example34-text').text('Selected: ' + $('#example34').val()).addClass('alert alert-info');
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -1685,12 +1686,12 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1685,12 +1686,12 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
/** /**
* Gets whether all the options are selected * Gets whether all the options are selected
* @param {jQuery} $el * @param {jQuery} $el
* @returns {bool} * @returns {bool}
*/ */
function multiselect_selected($el) { function multiselect_selected($el) {
var ret = true; var ret = true;
$('option', $el).each(function(element) { $('option', $el).each(function(element) {
if (!!!$(this).prop('selected')) { if (!!!$(this).prop('selected')) {
...@@ -1698,35 +1699,35 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1698,35 +1699,35 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
} }
}); });
return ret; return ret;
} }
/** /**
* Selects all the options * Selects all the options
* @param {jQuery} $el * @param {jQuery} $el
* @returns {undefined} * @returns {undefined}
*/ */
function multiselect_selectAll($el) { function multiselect_selectAll($el) {
$('option', $el).each(function(element) { $('option', $el).each(function(element) {
$el.multiselect('select', $(this).val()); $el.multiselect('select', $(this).val());
}); });
} }
/** /**
* Deselects all the options * Deselects all the options
* @param {jQuery} $el * @param {jQuery} $el
* @returns {undefined} * @returns {undefined}
*/ */
function multiselect_deselectAll($el) { function multiselect_deselectAll($el) {
$('option', $el).each(function(element) { $('option', $el).each(function(element) {
$el.multiselect('deselect', $(this).val()); $el.multiselect('deselect', $(this).val());
}); });
} }
/** /**
* Clears all the selected options * Clears all the selected options
* @param {jQuery} $el * @param {jQuery} $el
* @returns {undefined} * @returns {undefined}
*/ */
function multiselect_toggle($el, $btn) { function multiselect_toggle($el, $btn) {
if (multiselect_selected($el)) { if (multiselect_selected($el)) {
multiselect_deselectAll($el); multiselect_deselectAll($el);
$btn.text(&quot;Select All&quot;); $btn.text(&quot;Select All&quot;);
...@@ -1735,15 +1736,15 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1735,15 +1736,15 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
multiselect_selectAll($el); multiselect_selectAll($el);
$btn.text(&quot;Deselect All&quot;); $btn.text(&quot;Deselect All&quot;);
} }
} }
$(document).ready(function() { $(document).ready(function() {
$('#example21').multiselect(); $('#example21').multiselect();
$(&quot;#example21-toggle&quot;).click(function(e) { $(&quot;#example21-toggle&quot;).click(function(e) {
e.preventDefault(); e.preventDefault();
multiselect_toggle($(&quot;#example21&quot;), $(this)); multiselect_toggle($(&quot;#example21&quot;), $(this));
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -1765,7 +1766,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1765,7 +1766,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$('#example22').multiselect({ $('#example22').multiselect({
buttonClass: 'btn', buttonClass: 'btn',
buttonWidth: 'auto', buttonWidth: 'auto',
...@@ -1798,7 +1799,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1798,7 +1799,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
} }
} }
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -1823,7 +1824,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1823,7 +1824,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td> <td>
<pre class="linenums prettyprint"> <pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
var firstConfigurationSet = { var firstConfigurationSet = {
includeSelectAllOption: false, includeSelectAllOption: false,
...@@ -1859,7 +1860,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1859,7 +1860,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
break; break;
} }
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -1883,7 +1884,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1883,7 +1884,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td> <td>
<pre class="linenums prettyprint"> <pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$('#example37').multiselect({ $('#example37').multiselect({
onChange: function(option, checked) { onChange: function(option, checked) {
// Get selected options. // Get selected options.
...@@ -1913,7 +1914,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1913,7 +1914,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
} }
} }
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -1938,7 +1939,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1938,7 +1939,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td> <td>
<pre class="linenums prettyprint"> <pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
var orderCount = 0; var orderCount = 0;
$('#example38').multiselect({ $('#example38').multiselect({
buttonText: function(options) { buttonText: function(options) {
...@@ -1956,7 +1957,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1956,7 +1957,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
selected.sort(function(a, b) { selected.sort(function(a, b) {
return a[1] - b[1]; return a[1] - b[1];
}) });
var text = ''; var text = '';
for (var i = 0; i < selected.length; i++) { for (var i = 0; i < selected.length; i++) {
...@@ -1995,7 +1996,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -1995,7 +1996,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
alert(text); alert(text);
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -2019,7 +2020,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2019,7 +2020,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td> <td>
<pre class="linenums prettyprint"> <pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$('#example40').multiselect({ $('#example40').multiselect({
onChange: function(option, checked) { onChange: function(option, checked) {
var values = []; var values = [];
$('#example40 option').each(function() { $('#example40 option').each(function() {
...@@ -2030,7 +2031,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2030,7 +2031,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
$('#example40').multiselect('deselect', values); $('#example40').multiselect('deselect', values);
} }
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -2054,7 +2055,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2054,7 +2055,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td> <td>
<pre class="linenums prettyprint"> <pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$('#example42').multiselect({ $('#example42').multiselect({
onChange: function(option, checked) { onChange: function(option, checked) {
var selected = 0; var selected = 0;
$('option', $('#example42')).each(function() { $('option', $('#example42')).each(function() {
...@@ -2067,7 +2068,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2067,7 +2068,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
$('#example42').siblings('div').children('ul').dropdown('toggle'); $('#example42').siblings('div').children('ul').dropdown('toggle');
} }
} }
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -2093,7 +2094,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2093,7 +2094,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td> <td>
<pre class="linenums prettyprint"> <pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$('#example40').multiselect({ $('#example40').multiselect({
onChange: function(option, checked) { onChange: function(option, checked) {
var values = []; var values = [];
$('#example40 option').each(function() { $('#example40 option').each(function() {
...@@ -2104,7 +2105,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2104,7 +2105,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
$('#example40').multiselect('deselect', values); $('#example40').multiselect('deselect', values);
} }
}); });
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
...@@ -2118,6 +2119,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2118,6 +2119,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<p> <p>
For additional styling of the multiselect button, the CSS class <code>multiselect</code> can be used. For additional styling of the multiselect button, the CSS class <code>multiselect</code> can be used.
</p> </p>
<style media="screen" type="text/css"> <style media="screen" type="text/css">
.add-styling-1 .multiselect { .add-styling-1 .multiselect {
width: 500px; width: 500px;
...@@ -2156,7 +2158,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2156,7 +2158,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
}); });
}); });
</script> </script>
<div>
<table class="table table-striped"> <table class="table table-striped">
<tr class="add-styling-1"> <tr class="add-styling-1">
<td> <td>
...@@ -2217,7 +2218,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2217,7 +2218,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</td> </td>
</tr> </tr>
</table> </table>
</div>
<div class="page-header"> <div class="page-header">
<h1><a id="faq"></a>Frequently Asked Questions</h1> <h1><a id="faq"></a>Frequently Asked Questions</h1>
...@@ -2244,7 +2244,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2244,7 +2244,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</p> </p>
<p> <p>
<<<<<<< HEAD
<b>How to check whether filtering all options resulted no options being displayed (except the select all option)?</b> <b>How to check whether filtering all options resulted no options being displayed (except the select all option)?</b>
</p> </p>
...@@ -2270,15 +2269,15 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data); ...@@ -2270,15 +2269,15 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<p> <p>
Mainly there are two ways, either add a name to the <code>select</code>: Mainly there are two ways, either add a name to the <code>select</code>:
</p> </p>
<pre class="linenums prettyprint"> <pre class="linenums prettyprint">
&lt;select id="example2" multiple="multiple" name="select[]"&gt;&lt;/select&gt; &lt;select id="example2" multiple="multiple" name="select[]"&gt;&lt;/select&gt;
</pre> </pre>
<p>or add an appropriate name to the checkboxes:</p> <p>or add an appropriate name to the checkboxes:</p>
<pre class="linenums prettyprint"> <pre class="linenums prettyprint">
$('#example2').multiselect({ $('#example2').multiselect({
checkboxName: 'multiselect[]' checkboxName: 'multiselect[]'
}); });
</pre> </pre>
<p> <p>
<b>How to change the button class depending on the number of selected options?</b> <b>How to change the button class depending on the number of selected options?</b>
......
index.html
View file @ aefeff49
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<title>Bootstrap Multiselect</title> <title>Bootstrap Multiselect</title>
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="copyright" content="David Stutz" />
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css"> <link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
......
js/bootstrap-multiselect.js
View file @ aefeff49
...@@ -5,11 +5,6 @@ ...@@ -5,11 +5,6 @@
* Copyright 2012 - 2014 David Stutz * Copyright 2012 - 2014 David Stutz
* *
* Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0. * Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0.
*
* 2014.07.17 - Neil Monroe (neil.monroe@gmail.com)
* When updating the button text, target only the main button. This allows
* for additional buttons in templates to remain unaffected. For example, extra
* buttons in the filter template.
*/ */
!function($) { !function($) {
......
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