Skip to content

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

#368, #393, tests and documentation.

parent e0a994a0
Show whitespace changes
Inline Side-by-side
Showing with 288 additions and 31 deletions
dist/js/bootstrap-multiselect.js
View file @ bcace11e
...@@ -657,6 +657,10 @@ ...@@ -657,6 +657,10 @@
* Checks if a select all has already been created. * Checks if a select all has already been created.
*/ */
buildSelectAll: function() { buildSelectAll: function() {
if (typeof this.options.selectAllValue === 'number') {
this.options.selectAllValue = this.options.selectAllValue.toString();
}
var alreadyHasSelectAll = this.hasSelectAll(); var alreadyHasSelectAll = this.hasSelectAll();
if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple
......
index.html
View file @ bcace11e
...@@ -37,6 +37,8 @@ ...@@ -37,6 +37,8 @@
<li><a href="#post">Server-Side Processing</a></li> <li><a href="#post">Server-Side Processing</a></li>
<li><a href="#keyboard-support">Keyboard Support</a> <li><a href="#keyboard-support">Keyboard Support</a>
<li><a href="#faq">Frequently Asked Questions</a></li> <li><a href="#faq">Frequently Asked Questions</a></li>
<li><a href="#known-issues">Known Issues</a></li>
<li><a href="tests/SpecRunner.html">Tests</a></li>
<li><a href="#license">License</a></li> <li><a href="#license">License</a></li>
</ul> </ul>
</div> </div>
...@@ -46,7 +48,7 @@ ...@@ -46,7 +48,7 @@
</div> </div>
<p class="alert alert-info"> <p class="alert alert-info">
Tests are available <a href="http://davidstutz.github.io/bootstrap-multiselect/tests/SpecRunner.html">here</a> using the <a href="http://jasmine.github.io/" target="_blank">Jasmine Testing Framework</a>. <b>Please see <a href="#known-issues">Known Issues</a>.</b>
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
...@@ -54,10 +56,6 @@ ...@@ -54,10 +56,6 @@
</p> </p>
<p class="alert alert-info"> <p class="alert alert-info">
<b>The demonstration page for Twitter Bootstrap 2.3 was removed. Nevertheless, this page should work using Twitter Bootstrap 2.3 except for some methods which are marked accordingly.</b>
</p>
<p class="alert alert-warning">
<b>Please have a look on <a href="#how-to-contribute">How to contribute?</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.</b> <b>Please have a look on <a href="#how-to-contribute">How to contribute?</a> and the <a href="https://github.com/davidstutz/bootstrap-multiselect/issues">Issue Tracker</a>.</b>
</p> </p>
...@@ -1421,6 +1419,39 @@ ...@@ -1421,6 +1419,39 @@
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
</pre>
</div>
<p>The <code>selectAllValue</code> option should usually be a string, however, numeric values work as well:</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-selectAllValue-numeric').multiselect({
includeSelectAllOption: true,
selectAllValue: 0
});
});
</script>
<select id="example-selectAllValue-numeric" multiple="multiple">
<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-selectAllValue-numeric').multiselect({
includeSelectAllOption: true,
selectAllValue: 0
});
});
&lt;/script&gt;
</pre> </pre>
</div> </div>
</td> </td>
...@@ -2491,20 +2522,12 @@ ...@@ -2491,20 +2522,12 @@
$(document).ready(function() { $(document).ready(function() {
var firstConfigurationSet = { var firstConfigurationSet = {
selectAll: { includeSelectAllOption: false,
enabled: false enableFiltering: false
},
filter: {
enabled: false
}
}; };
var secondConfigurationSet = { var secondConfigurationSet = {
selectAll: { includeSelectAllOption: false,
enabled: true enableFiltering: true
},
filter: {
enabled: true
}
}; };
var set = 1; var set = 1;
...@@ -2553,20 +2576,12 @@ ...@@ -2553,20 +2576,12 @@
$(document).ready(function() { $(document).ready(function() {
var firstConfigurationSet = { var firstConfigurationSet = {
selectAll: { includeSelectAllOption: false,
enabled: false enableFiltering: false
},
filter: {
enabled: false
}
}; };
var secondConfigurationSet = { var secondConfigurationSet = {
selectAll: { includeSelectAllOption: false,
enabled: true enableFiltering: true
},
filter: {
enabled: true
}
}; };
var set = 1; var set = 1;
...@@ -3844,6 +3859,27 @@ $('.multiselect').multiselect({ ...@@ -3844,6 +3859,27 @@ $('.multiselect').multiselect({
<dd> <dd>
This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/271">#271.</a> This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/271">#271.</a>
</dd> </dd>
<dt>Esc does not close the dropdown?!</dt>
<dd>
This issue is discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/368">#368</a>. Currently, pressing <code>Esc</code> will not close the dropdown as there were some bugs with this.
</dd>
</dl>
<div class="page-header">
<h2 id="known-issues">Known Issues</h2>
</div>
<dl>
<dt>Slow dropdown on Chrome 35.</dt>
<dd>
As discussed in <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/268">#268</a>, certain versions seem to have some performance problems, especially Chrome 35.0.1916.114m.
</dd>
<dt>Using <code>maxHeight</code> results in the filter being not fixed at the top.</dt>
<dd>
See issue <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/396"></a>. Pull requests are welcome.
</dd>
</dl> </dl>
<div class="page-header"> <div class="page-header">
......
tests/spec/bootstrap-multiselect.js
View file @ bcace11e
...@@ -49,6 +49,16 @@ describe('Bootstrap Multiselect "Core".', function() { ...@@ -49,6 +49,16 @@ describe('Bootstrap Multiselect "Core".', function() {
expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true); expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
}); });
it('Select method should handle "null" and "undefined" correctly.', function() {
expect($('#multiselect option:selected').length).toBe(9);
$('#multiselect').multiselect('select', null);
expect($('#multiselect option:selected').length).toBe(9);
$('#multiselect').multiselect('select', undefined);
expect($('#multiselect option:selected').length).toBe(9);
});
it('Should be able to deselect options by value.', function() { it('Should be able to deselect options by value.', function() {
$('#multiselect').multiselect('select', '10'); $('#multiselect').multiselect('select', '10');
$('#multiselect').multiselect('deselect', '10'); $('#multiselect').multiselect('deselect', '10');
...@@ -57,6 +67,16 @@ describe('Bootstrap Multiselect "Core".', function() { ...@@ -57,6 +67,16 @@ describe('Bootstrap Multiselect "Core".', function() {
expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false); expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
}); });
it('Deselect method should handle "null" and "undefined" correctly.', function() {
expect($('#multiselect option:selected').length).toBe(9);
$('#multiselect').multiselect('deselect', null);
expect($('#multiselect option:selected').length).toBe(9);
$('#multiselect').multiselect('deselect', undefined);
expect($('#multiselect option:selected').length).toBe(9);
});
it('Should be able to select options using an array of values.', function() { it('Should be able to select options using an array of values.', function() {
$('#multiselect').multiselect('select', ['10', '11']); $('#multiselect').multiselect('select', ['10', '11']);
...@@ -91,7 +111,7 @@ describe('Bootstrap Multiselect "Core".', function() { ...@@ -91,7 +111,7 @@ describe('Bootstrap Multiselect "Core".', function() {
expect($('#multiselect').prop('disabled')).toBe(false); expect($('#multiselect').prop('disabled')).toBe(false);
}); });
it('Should be able to selec all options.', function() { it('Should be able to select all options.', function() {
$('#multiselect').multiselect('selectAll'); $('#multiselect').multiselect('selectAll');
for (var i = 1; i < 100; i++) { for (var i = 1; i < 100; i++) {
...@@ -100,7 +120,7 @@ describe('Bootstrap Multiselect "Core".', function() { ...@@ -100,7 +120,7 @@ describe('Bootstrap Multiselect "Core".', function() {
} }
}); });
it('Should be able to deselec all options.', function() { it('Should be able to deselect all options.', function() {
$('#multiselect').multiselect('selectAll'); $('#multiselect').multiselect('selectAll');
for (var i = 1; i < 100; i++) { for (var i = 1; i < 100; i++) {
...@@ -150,9 +170,136 @@ describe('Bootstrap Multiselect "Core".', function() { ...@@ -150,9 +170,136 @@ describe('Bootstrap Multiselect "Core".', function() {
expect($('#multiselect option[value="10"]').prop('selected')).toBe(true); expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
}); });
it('Should deselect an option when checkbox is changed (change event).', function() {
$('#multiselect-container li input[value="10"]').prop('checked', true);
$('#multiselect-container li input[value="10"]').trigger('change');
// Already checked above.
$('#multiselect-container li input[value="10"]').prop('checked', false);
$('#multiselect-container li input[value="10"]').trigger('change');
expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
});
it('Should select an option when checkbox is clicked.', function() {
$('#multiselect-container li input[value="10"]').click();
expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(true);
expect($('#multiselect option[value="10"]').prop('selected')).toBe(true);
});
it('Should deselect an option when checkbox is clicked.', function() {
$('#multiselect-container li input[value="10"]').click();
$('#multiselect-container li input[value="10"]').click();
expect($('#multiselect-container input[value="10"]').prop('checked')).toBe(false);
expect($('#multiselect option[value="10"]').prop('selected')).toBe(false);
});
afterEach(function() { afterEach(function() {
$('#multiselect').multiselect('destroy'); $('#multiselect').multiselect('destroy');
$('#multiselect').remove();
});
});
describe('Bootstrap Multiselect "Single Selection"', function() {
beforeEach(function() {
var $select = $('<select id="multiselect"></select>');
for (var i = 1; i < 100; i++) {
$select.append('<option value="' + i + '">Option ' + i + '</option>');
}
$('body').append($select);
$select.multiselect({
buttonContainer: '<div id="multiselect-container"></div>'
});
});
it('Should create radio buttons instead of checkboxes.', function() {
expect($('#multiselect-container input[type="radio"]').length).toBe(99);
expect($('#multiselect-container input[type="checkbox"]').length).toBe(0);
// Browser selects one option per default.
expect($('#multiselect option:selected').length).toBe(1);
});
it('Only one option at a time can be selected.', function() {
expect($('#multiselect option:selected').length).toBe(1);
var i = 0;
$('#multiselect-container input').each(function() {
if (i === 0) {
expect($(this).prop('checked')).toBe(true);
i++;
}
else {
expect($(this).prop('checked')).toBe(false);
$(this).click();
expect($('#multiselect option:selected').length).toBe(1);
expect($(this).prop('checked')).toBe(true);
i++;
}
});
});
afterEach(function() {
$('#multiselect').multiselect('destroy');
$('#multiselect').remove();
});
});
describe('Bootstrap Multiselect "Optgroups"', function() {
beforeEach(function() {
var $select = $('<select id="multiselect" multiple="multiple"></select>');
for (var i = 1; i < 11; i++) {
var $optgroup = $('<optgroup label="Group ' + i + '"></optgroup>');
for (var j = 1; j < 11; j++) {
$optgroup.append('<option value="' + i + '-' + j + '">Option ' + i + '.' + j + '</option>');
}
$select.append($optgroup);
}
$('body').append($select);
$select.multiselect({
buttonContainer: '<div id="multiselect-container"></div>',
enableClickableOptGroups: true
});
});
it('Should correctly create labels for optgroups.', function() {
expect($('#multiselect-container li.multiselect-group').length).toBe(10);
expect($('#multiselect-container li.multiselect-group-clickable').length).toBe(10);
$('#multiselect-container label.multiselect-group').each(function() {
expect($('input', $(this)).length).toBe(10);
});
});
it('Groups should be clickable.', function() {
expect($('#multiselect option:selected').length).toBe(0);
var i = 0;
$('#multiselect-container li.multiselect-group').each(function() {
$('label', $(this)).click();
expect($('option:selected', $('#multiselect optgroup')[i]).length).toBe(10);
expect($('#multiselect option:selected').length).toBe(10);
$('label', $(this)).click();
i++;
});
});
afterEach(function() {
$('#multiselect').multiselect('destroy');
$('#multiselect').remove(); $('#multiselect').remove();
}); });
}); });
...@@ -352,8 +499,78 @@ describe('Bootstrap Multiselect "Select All".', function() { ...@@ -352,8 +499,78 @@ describe('Bootstrap Multiselect "Select All".', function() {
expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false); expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
}); });
it('Should update the select all option when all options are selected by the click event.', function() {
expect($('#multiselect option:selected').length).toBe(0);
expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
$('#multiselect-container input[value!="multiselect-all"]').click();
expect($('#multiselect option:selected').length).toBe(99);
expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
});
it('Should update the select all option when all options are deselected by the click event.', function() {
expect($('#multiselect option:selected').length).toBe(0);
expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
$('#multiselect-container input[value!="multiselect-all"]').click();
expect($('#multiselect option:selected').length).toBe(99);
expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(true);
$('#multiselect-container input[value!="multiselect-all"]').click();
expect($('#multiselect option:selected').length).toBe(0);
expect($('#multiselect-container input[value="multiselect-all"]').prop('checked')).toBe(false);
});
afterEach(function() { afterEach(function() {
$('#multiselect').multiselect('destroy'); $('#multiselect').multiselect('destroy');
$('#multiselect').remove(); $('#multiselect').remove();
}); });
}); });
describe('Bootstrap Multiselect Specific Issues', function() {
it('#393', function() {
var $select = $('<select id="multiselect" multiple="multiple"></select>');
for (var i = 1; i < 100; i++) {
$select.append('<option value="' + i + '">1</option>');
}
$('body').append($select);
$select.multiselect({
buttonContainer: '<div id="multiselect-container"></div>',
includeSelectAllOption: true,
selectAllValue: 0
});
expect($('#multiselect-container input[value="0"]').length).toBe(1);
expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
$('#multiselect').multiselect('selectAll');
expect($('#multiselect option:selected').length).toBe(99);
expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(true);
$('#multiselect').multiselect('deselectAll');
expect($('#multiselect option:selected').length).toBe(0);
expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
$('#multiselect-container input[value="0"]').click();
expect($('#multiselect option:selected').length).toBe(99);
expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(true);
$('#multiselect-container input[value="0"]').click();
expect($('#multiselect option:selected').length).toBe(0);
expect($('#multiselect-container input[value="0"]').prop('checked')).toBe(false);
$('#multiselect').multiselect('destroy');
$('#multiselect').remove();
});
});
\ No newline at end of file
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