Commit fb70b2ad authored by David Stutz's avatar David Stutz

Merge pull request #388 from scenting/master

#305, #302. Added enableClickableOptGroups option.
parents ba72c358 1c9d0f7b
...@@ -246,6 +246,10 @@ $(document).ready(function() { ...@@ -246,6 +246,10 @@ $(document).ready(function() {
$('#example53-deselect').on('click', function() { $('#example53-deselect').on('click', function() {
$('#example53').multiselect('deselect', 'cheese'); $('#example53').multiselect('deselect', 'cheese');
}); });
$('#example54').multiselect({
enableClickableOptGroups: true
});
}); });
</script> </script>
...@@ -524,6 +528,28 @@ $(document).ready(function() { ...@@ -524,6 +528,28 @@ $(document).ready(function() {
Option groups and options without any group are supported simultaneously. Option groups and options without any group are supported simultaneously.
</td> </td>
</tr> </tr>
<tr>
<td>
<select id="example54" multiple="multiple">
<optgroup label="Mathematics">
<option value="analysis">Analysis</option>
<option value="algebra">Linear Algebra</option>
<option value="discrete">Discrete Mathematics</option>
<option value="numerical">Numerical Analysis</option>
<option value="probability">Probability Theory</option>
</optgroup>
<optgroup label="Computer Science">
<option value="programming">Introduction to Programming</option>
<option value="automata">Automata Theory</option>
<option value="complexity">Complexity Theory</option>
<option value="software">Software Engineering</option>
</optgroup>
</select>
</td>
<td>
Use <code>enableClickableOptGroups</code> to make optgroup headers clickable to select / deselect all options inside an optgroup.
</td>
</tr>
<tr> <tr>
<td> <td>
<select id="example20" multiple="multiple"> <select id="example20" multiple="multiple">
...@@ -1161,6 +1187,23 @@ $(document).ready(function() { ...@@ -1161,6 +1187,23 @@ $(document).ready(function() {
disableIfEmpty: true disableIfEmpty: true
}); });
}); });
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>enableClickableOptGroups</code></td>
<td>
Set to <code>true</code> to make optgroup headers clickable to select/deselect options.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
enableClickableOptGroups: true
});
});
&lt;/script&gt; &lt;/script&gt;
</pre> </pre>
</td> </td>
......
...@@ -242,6 +242,7 @@ ...@@ -242,6 +242,7 @@
selectAllValue: 'multiselect-all', selectAllValue: 'multiselect-all',
enableFiltering: false, enableFiltering: false,
enableCaseInsensitiveFiltering: false, enableCaseInsensitiveFiltering: false,
enableClickableOptGroups: false,
filterPlaceholder: 'Search', filterPlaceholder: 'Search',
// possible options: 'text', 'value', 'both' // possible options: 'text', 'value', 'both'
filterBehavior: 'text', filterBehavior: 'text',
...@@ -527,6 +528,26 @@ ...@@ -527,6 +528,26 @@
event.preventDefault(); event.preventDefault();
} }
}, this)); }, this));
if(this.options.enableClickableOptGroups && this.options.multiple) {
$('li.group', this.$ul).on('click', $.proxy(function(event) {
event.stopPropagation();
var group = $(event.target).parent();
// Search all option in optgroup
var $options = group.nextUntil('li.group');
// check or uncheck items
var allChecked = true;
var optionInputs = $options.find('input');
optionInputs.each(function() {
allChecked = allChecked && $(this).prop('checked');
});
optionInputs.prop('checked', !allChecked).trigger('change');
}, this));
}
}, },
/** /**
......
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