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 @@
<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.
</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>
......@@ -66,11 +62,15 @@
event.stopPropagation();
});
</script>
<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.
</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">
<h1><a id="getting-started"></a>Getting Started</h1>
</div>
......@@ -987,6 +987,12 @@ $(document).ready(function() {
</pre>
</td>
</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>
<td><code>includeSelectAllOption</code></td>
<td>
......@@ -1459,15 +1465,17 @@ $('.multiselect').multiselect('dataprovider', data);
</pre>
</td>
<td>
<select id="example49" multiple="multiple"></select>
<select id="example50" multiple="multiple"></select>
<div class="btn-group">
<select id="example49" multiple="multiple"></select>
<select id="example50" multiple="multiple"></select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<p><code>.multiselect('setOptions', options)</code></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>
</td>
</tr>
......@@ -2593,6 +2601,21 @@ validator.settings.ignore = ':hidden:not(".multiselect")';
<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).
</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 class="container">
......
js/bootstrap-multiselect.js
View file @ 03992073
......@@ -235,7 +235,7 @@
// Maximum height of the dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: false,
checkboxName: 'multiselect',
checkboxName: false,
includeSelectAllOption: false,
includeSelectAllIfMoreThan: 0,
selectAllText: ' Select all',
......@@ -546,8 +546,14 @@
var $li = $(this.options.templates.li);
$('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 $checkbox = $('input', $li);
$checkbox.val(value);
......@@ -631,8 +637,14 @@
var $li = $(this.options.templates.li);
$('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);
$checkbox.val(this.options.selectAllValue);
......@@ -791,7 +803,7 @@
var $checkbox = this.getInputByValue(value);
if($option === undefined || $checkbox === undefined) {
continue;
continue;
}
if (!this.options.multiple) {
......@@ -845,7 +857,7 @@
var $checkbox = this.getInputByValue(value);
if($option === undefined || $checkbox === undefined) {
continue;
continue;
}
if (this.options.selectedClass) {
......@@ -901,7 +913,7 @@
var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
if(justVisible) {
var visibleCheckboxes = allCheckboxes.filter(":visible");
var visibleCheckboxes = $("li input[type='checkbox']:enabled", this.$ul).filter(":visible");
visibleCheckboxes.prop('checked', false);
var values = visibleCheckboxes.map(function() {
......@@ -912,14 +924,17 @@
return $.inArray($(this).val(), values) !== -1;
}).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 {
var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul);
allCheckboxes.prop('checked', false);
$("li input[type='checkbox']:enabled", this.$ul).prop('checked', 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