<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Multiselect Tests</title>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="copyright" content="David Stutz" />
<link rel="stylesheet" href="css/bootstrap-3.0.3.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap-3.0.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
</head>
<body>
<a href="https://github.com/davidstutz/bootstrap-multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="container">
<div class="page-header">
<h1>Bootstrap Multiselect Tests</h1>
</div>
<table class="table table-striped table-hover">
<tbody>
<tr id="test-build-tr" class="success">
<th>Test build</th>
<td>
<select id="test-build-select" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>Everything fine.</td>
</tr>
<tr id="test-build-optgroups-tr" class="success">
<th>Test build with optgroups</th>
<td>
<select id="test-build-optgroups-select" multiple="multiple">
<optgroup label="1,2">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</optgroup>
<optgroup label="3,4,5">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</optgroup>
</select>
</td>
<td>Everything fine.</td>
</tr>
<tr id="test-build-selected-tr" class="success">
<th>Test build with selected options</th>
<td>
<select id="test-build-selected-select" multiple="multiple">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>Everything fine.</td>
</tr>
<tr id="test-build-select-all-tr" class="success">
<th>Test build with select all</th>
<td>
<select id="test-build-select-all-select" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>Everything fine.</td>
</tr>
<tr id="test-build-filter-tr" class="success">
<th>Test build with filter</th>
<td>
<select id="test-build-filter-select" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>Everything fine.</td>
</tr>
<tr id="test-select-tr" class="success">
<th>Test select</th>
<td>
<select id="test-select-select" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>Everything fine.</td>
</tr>
<tr id="test-deselect-tr" class="success">
<th>Test deselect</th>
<td>
<select id="test-deselect-select" multiple="multiple">
<option value="1" selected="selected">1</option>
<option value="2" selected="selected">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>Everything fine.</td>
</tr>
<tr id="test-max-height-tr" class="success">
<th>Test max height</th>
<td>
<select id="test-max-height-select" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</td>
<td>Everything fine.</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
// Test build of multiselect.
var build = function(select, tr) {
select.multiselect();
if (select.length === 0) {
return 'Select not present anymore.';
}
if (select.css('display') !== 'none') {
return 'Select still visible (expected <code>display: none;</code>).';
}
if ($('button.multiselect', tr).length === 0) {
return 'Multiselect button not present.';
}
if ($('option', select).length !== 5) {
return 'Not all options present anymore.';
}
if ($('ul.multiselect-container', tr).length === 0) {
return 'Unordered list <code>.multiselect-container</code> not present.';
}
if ($('ul.multiselect-container li', tr).length !== 5) {
return 'No list item for each option present.';
}
if ($('ul.multiselect-container li a', tr).length !== 5) {
return 'Not all list items come with an anchor inside.';
}
return false;
}($('#test-build-select'), $('#test-build-tr'));
if (build) {
$('#test-build-tr').removeClass('success').addClass('danger');
$('#test-build-tr td').last().html(build);
}
// Test build with optgroups.
var buildOptgroups = function(select, tr) {
select.multiselect();
if ($('optgroup', select).length !== 2) {
return 'Optgroups not present anymore (2 expected).';
}
var first = $('optgroup', select).get(0);
var second = $('optgroup', select).get(1);
if ($('option', $(first)).length !== 2) {
return 'First optgroup does not have 2 options.';
}
if ($('option', $(second)).length !== 3) {
return 'Second optgroup does not have 3 options.';
}
// Check the corresponding labels.
if ($('label.multiselect-group', tr).length !== 2) {
return 'Expected 2 labels within the unordered list.';
}
// Check labeling of groups.
var firstLabel = $('label.multiselect-group', tr).get(0);
var secondLabel = $('label.multiselect-group', tr).get(1);
if ($(firstLabel).text() !== $(first).prop('label')) {
return 'First group labeled incorrectly.';
}
if ($(secondLabel).text() !== $(second).prop('label')) {
return 'Second group labeled incorrectly.';
}
return false;
}($('#test-build-optgroups-select'), $('#test-build-optgroups-tr'));
if (buildOptgroups) {
$('#test-build-optgroups-tr').removeClass('success').addClass('danger');
$('#test-build-optgroups-tr td').last().html(build);
}
var buildSelected = function(select, tr ) {
select.multiselect();
if ($('option:selected', select).length !== 1) {
return 'Multiselect did not adopt selected options (1 selected option).';
}
if ($('ul.multiselect-container li.active', tr).length !== 1) {
return 'Corresponding list item not set to <code>.active</code>.';
}
return false;
}($('#test-build-selected-select'), $('#test-build-selected-tr'));
if (buildSelected) {
$('#test-build-selected-tr').removeClass('success').addClass('danger');
$('#test-build-selected-tr td').last().html(buildSelected);
}
var buildSelectAll = function(select, tr ) {
var value = 'multiselect-select-all';
select.multiselect({
includeSelectAllOption: true,
selectAllValue: value
});
if ($('.multiselect-container input[value="' + value + '"]', tr).length !== 1) {
return 'Expected exactly one input with value ' + value + ' as select all option.';
}
return false;
}($('#test-build-select-all-select'), $('#test-build-select-all-tr'));
if (buildSelectAll) {
$('#test-build-select-all-tr').removeClass('success').addClass('danger');
$('#test-build-select-all-tr td').last().html(buildSelectAll);
}
var buildFilter = function(select, tr) {
select.multiselect({
enableFiltering: true
});
if ($('.multiselect-search', tr).length !== 1) {
return 'No search input present.';
}
}($('#test-build-filter-select'), $('#test-build-filter-tr'));
if (buildFilter) {
$('#test-build-filter-tr').removeClass('success').addClass('danger');
$('#test-build-filter-tr td').last().html(buildFilter);
}
// Test select.
var select = function(selectElement, tr) {
selectElement.multiselect();
// Check for no selected options and no active li's.
if ($('option:selected', selectElement).length > 0) {
return 'There are already selected options (0 expected).';
}
if ($('ul.multiselect-container li.active', tr).length > 0) {
return 'There are already active list items (0 expected).';
}
selectElement.multiselect('select', '1');
if ($('option:selected', selectElement).length !== 1) {
return 'Just selected an option - option not marked selected.';
}
if ($('ul.multiselect-container li.active', tr).length !== 1) {
return 'Just selected an option - list item not set active.';
}
if ($('option:selected', selectElement).first().val() !== '1') {
return 'Wrong option selected.';
}
selectElement.multiselect('select', ['2', '3']);
if ($('option:selected', selectElement).length !== 3) {
return 'Just selected two additional options - options not marked selected.';
}
if ($('ul.multiselect-container li.active', tr).length !== 3) {
return 'Just selected two additional options - list items not set active.';
}
var second = $('option:selected', selectElement).get(1),
third = $('option:selected', selectElement).get(2);
if (second === undefined || second.length === 0) {
return 'Could not get second option.';
}
if (third === undefined || third.length === 0) {
return 'Could not get third option.';
}
if ($(second).val() !== '2' || $(third).val() !== '3') {
return 'Wrong options selected.';
}
return false;
}($('#test-select-select'), $('#test-select-tr'));
if (select) {
$('#test-select-tr').removeClass('success').addClass('danger');
$('#test-select-tr td').last().html(select);
}
// Test deselect.
var deselect = function(select, tr) {
select.multiselect();
// Check for no selected options and no active li's.
if ($('option:selected', select).length !== 3) {
return 'There should be 3 options selected.';
}
if ($('ul.multiselect-container li.active', tr).length !== 3) {
return 'There should be 3 list items set to active.';
}
select.multiselect('deselect', '1');
if ($('option:selected', select).length !== 2) {
return 'Just deselected an option - option not marked deselected.';
}
if ($('ul.multiselect-container li.active', tr).length !== 2) {
return 'Just deselected an option - list item not set inactive.';
}
if ($('option:selected', select).first().val() !== '2') {
return 'Wrong option deselected.';
}
select.multiselect('deselect', ['2', '3']);
if ($('option:selected', select).length > 0) {
return 'Just deselected two additional options - options not marked deselected.';
}
if ($('ul.multiselect-container li.active', tr).length > 0) {
return 'Just deselected two additional options - list items not set unactive.';
}
return false;
}($('#test-deselect-select'), $('#test-deselect-tr'));
if (deselect) {
$('#test-deselect-tr').removeClass('success').addClass('danger');
$('#test-deselect-tr td').last().html(deselect);
}
var maxHeight = function(select, tr) {
select.multiselect({
maxHeight: 100
});
var height = $('.multiselect-container', tr).css('max-height');
if (height !== '100px') {
return 'Max height not set correctly (set: ' + height + ').';
}
return false;
}($('#test-max-height-select'), $('#test-max-height-tr'));
if (maxHeight) {
$('#test-max-height-tr').removeClass('success').addClass('danger');
$('#test-max-height-tr td').last().html(maxHeight);
}
});
</script>
</body>
</html>