Skip to content

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

#362.

parent 5991dd34
Hide whitespace changes
Inline Side-by-side
Showing with 59 additions and 21 deletions
index.html
View file @ 03992073
...@@ -54,10 +54,6 @@ ...@@ -54,10 +54,6 @@
<p class="lead"> <p class="lead">
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.
</p> </p>
<p>
Please have a look at the <a href="https://github.com/davidstutz/bootstrap-multiselect/blob/master/README.md">Contribution Guidelines</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.
</p>
</div> </div>
</div> </div>
...@@ -66,11 +62,15 @@ ...@@ -66,11 +62,15 @@
event.stopPropagation(); event.stopPropagation();
}); });
</script> </script>
<p class="alert alert-info"> <p class="alert alert-info">
The demonstration page for Bootstrap 2.3.x was removed. Nevertheless, this page should be working with Bootstrap 2.3.x as well except for some methods which are marked accordingly. The demonstration page for Bootstrap 2.3.x was removed. Nevertheless, this page should be working with Bootstrap 2.3.x as well except for some methods which are marked accordingly.
</p> </p>
<p class="alert alert-warning">
Please have a look at the <a href="https://github.com/davidstutz/bootstrap-multiselect/blob/master/README.md">Contribution Guidelines</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.
</p>
<div class="page-header"> <div class="page-header">
<h1><a id="getting-started"></a>Getting Started</h1> <h1><a id="getting-started"></a>Getting Started</h1>
</div> </div>
...@@ -987,6 +987,12 @@ $(document).ready(function() { ...@@ -987,6 +987,12 @@ $(document).ready(function() {
</pre> </pre>
</td> </td>
</tr> </tr>
<tr>
<td><code>checkboxName</code></td>
<td>
Per default, this option is set to <code>false</code> and the generated checkboxes (or radio buttons) are not given any name. If not set to <code>false</code>, this option defines the name of all checkboxes (or radio buttons).
</td>
</tr>
<tr> <tr>
<td><code>includeSelectAllOption</code></td> <td><code>includeSelectAllOption</code></td>
<td> <td>
...@@ -1459,15 +1465,17 @@ $('.multiselect').multiselect('dataprovider', data); ...@@ -1459,15 +1465,17 @@ $('.multiselect').multiselect('dataprovider', data);
</pre> </pre>
</td> </td>
<td> <td>
<select id="example49" multiple="multiple"></select> <div class="btn-group">
<select id="example50" multiple="multiple"></select> <select id="example49" multiple="multiple"></select>
<select id="example50" multiple="multiple"></select>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2"> <td colspan="2">
<p><code>.multiselect('setOptions', options)</code></p> <p><code>.multiselect('setOptions', options)</code></p>
<p> <p>
Used to change configuration after initializing the multiselect. This may be useful in combination with <code>.multiselect('rebuild')</code>. Used to change configuration after initializing the multiselect. This may be useful in combination with <code>.multiselect('rebuild')</code>. See the <a href="#further-examples">Further Examples</a> section for an example.
</p> </p>
</td> </td>
</tr> </tr>
...@@ -2593,6 +2601,21 @@ validator.settings.ignore = ':hidden:not(".multiselect")'; ...@@ -2593,6 +2601,21 @@ validator.settings.ignore = ':hidden:not(".multiselect")';
<p> <p>
Have a look at the <a href="#further-examples">Further Examples</a> section (in addition, issue <a target="_blank" href="https://github.com/davidstutz/bootstrap-multiselect/issues/360">360</a> discussed this). Have a look at the <a href="#further-examples">Further Examples</a> section (in addition, issue <a target="_blank" href="https://github.com/davidstutz/bootstrap-multiselect/issues/360">360</a> discussed this).
</p> </p>
<p>
<b>Using multiple <code>select</code>'s in single selection mode with <code>option</code>'s sharing values across the different <code>select</code>'s.</b>
</p>
<p>
This issue is discussed in detail here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/362">#362</a>. A simple solution is to use different option values for the option <code>checkboxName</code>:
</p>
<pre class="prettyprint linenums">
$('.multiselect').multiselect({
checkboxName: _.uniqueId('multiselect_')
});
</pre>
<p>
where <code>_.uniqueId('multiselect_')</code> should be replaced with a random generator. Alternatively, a unique value for <code>checkboxName</code> can be used for each multiselect.
</p>
</div> </div>
<div class="container"> <div class="container">
......
js/bootstrap-multiselect.js
View file @ 03992073
...@@ -235,7 +235,7 @@ ...@@ -235,7 +235,7 @@
// Maximum height of the dropdown menu. // Maximum height of the dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed. // If maximum height is exceeded a scrollbar will be displayed.
maxHeight: false, maxHeight: false,
checkboxName: 'multiselect', checkboxName: false,
includeSelectAllOption: false, includeSelectAllOption: false,
includeSelectAllIfMoreThan: 0, includeSelectAllIfMoreThan: 0,
selectAllText: ' Select all', selectAllText: ' Select all',
...@@ -546,8 +546,14 @@ ...@@ -546,8 +546,14 @@
var $li = $(this.options.templates.li); var $li = $(this.options.templates.li);
$('label', $li).addClass(inputType); $('label', $li).addClass(inputType);
$('label', $li).append('<input type="' + inputType + '" name="' + this.options.checkboxName + '" />');
if (this.options.checkboxName) {
$('label', $li).append('<input type="' + inputType + '" name="' + this.options.checkboxName + '" />');
}
else {
$('label', $li).append('<input type="' + inputType + '" />');
}
var selected = $(element).prop('selected') || false; var selected = $(element).prop('selected') || false;
var $checkbox = $('input', $li); var $checkbox = $('input', $li);
$checkbox.val(value); $checkbox.val(value);
...@@ -631,8 +637,14 @@ ...@@ -631,8 +637,14 @@
var $li = $(this.options.templates.li); var $li = $(this.options.templates.li);
$('label', $li).addClass("checkbox"); $('label', $li).addClass("checkbox");
$('label', $li).append('<input type="checkbox" name="' + this.options.checkboxName + '" />');
if (this.options.checkboxName) {
$('label', $li).append('<input type="checkbox" name="' + this.options.checkboxName + '" />');
}
else {
$('label', $li).append('<input type="checkbox" />');
}
var $checkbox = $('input', $li); var $checkbox = $('input', $li);
$checkbox.val(this.options.selectAllValue); $checkbox.val(this.options.selectAllValue);
...@@ -791,7 +803,7 @@ ...@@ -791,7 +803,7 @@
var $checkbox = this.getInputByValue(value); var $checkbox = this.getInputByValue(value);
if($option === undefined || $checkbox === undefined) { if($option === undefined || $checkbox === undefined) {
continue; continue;
} }
if (!this.options.multiple) { if (!this.options.multiple) {
...@@ -845,7 +857,7 @@ ...@@ -845,7 +857,7 @@
var $checkbox = this.getInputByValue(value); var $checkbox = this.getInputByValue(value);
if($option === undefined || $checkbox === undefined) { if($option === undefined || $checkbox === undefined) {
continue; continue;
} }
if (this.options.selectedClass) { if (this.options.selectedClass) {
...@@ -901,7 +913,7 @@ ...@@ -901,7 +913,7 @@
var justVisible = typeof justVisible === 'undefined' ? true : justVisible; var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
if(justVisible) { if(justVisible) {
var visibleCheckboxes = allCheckboxes.filter(":visible"); var visibleCheckboxes = $("li input[type='checkbox']:enabled", this.$ul).filter(":visible");
visibleCheckboxes.prop('checked', false); visibleCheckboxes.prop('checked', false);
var values = visibleCheckboxes.map(function() { var values = visibleCheckboxes.map(function() {
...@@ -912,14 +924,17 @@ ...@@ -912,14 +924,17 @@
return $.inArray($(this).val(), values) !== -1; return $.inArray($(this).val(), values) !== -1;
}).prop('selected', false); }).prop('selected', false);
$("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass); if (this.options.selectedClass) {
$("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass);
}
} }
else { else {
var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul); $("li input[type='checkbox']:enabled", this.$ul).prop('checked', false);
allCheckboxes.prop('checked', false);
$("option:enabled", this.$select).prop('selected', false); $("option:enabled", this.$select).prop('selected', false);
$("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass);
if (this.options.selectedClass) {
$("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass);
}
} }
}, },
......
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