Skip to content

B
bootstrap-multiselect
Commit 47110d7e authored by davidstutz's avatar davidstutz
Browse files
Options

#499, #500 and #510.

parent bdeaef06
Show whitespace changes
Inline Side-by-side
Showing with 95 additions and 12 deletions
dist/js/bootstrap-multiselect.js
View file @ 47110d7e
...@@ -287,6 +287,7 @@ ...@@ -287,6 +287,7 @@
onSelectAll: function() { onSelectAll: function() {
}, },
enableHTML: false,
buttonClass: 'btn btn-default', buttonClass: 'btn btn-default',
inheritClass: false, inheritClass: false,
buttonWidth: 'auto', buttonWidth: 'auto',
...@@ -666,12 +667,19 @@ ...@@ -666,12 +667,19 @@
var $label = $('label', $li); var $label = $('label', $li);
$label.addClass(inputType); $label.addClass(inputType);
if (this.options.enableHTML) {
$label.html(" " + label);
}
else {
$label.text(" " + label);
}
var $checkbox = $('<input/>').attr('type', inputType); var $checkbox = $('<input/>').attr('type', inputType);
if (this.options.checkboxName) { if (this.options.checkboxName) {
$checkbox.attr('name', this.options.checkboxName); $checkbox.attr('name', this.options.checkboxName);
} }
$label.append($checkbox); $label.prepend($checkbox);
var selected = $element.prop('selected') || false; var selected = $element.prop('selected') || false;
$checkbox.val(value); $checkbox.val(value);
...@@ -682,7 +690,6 @@ ...@@ -682,7 +690,6 @@
.addClass('multiselect-all'); .addClass('multiselect-all');
} }
$label.append(" " + label);
$label.attr('title', $element.attr('title')); $label.attr('title', $element.attr('title'));
this.$ul.append($li); this.$ul.append($li);
...@@ -724,7 +731,13 @@ ...@@ -724,7 +731,13 @@
// Add a header for the group. // Add a header for the group.
var $li = $(this.options.templates.liGroup); var $li = $(this.options.templates.liGroup);
if (this.options.enableHTML) {
$('label', $li).html(groupName);
}
else {
$('label', $li).text(groupName); $('label', $li).text(groupName);
}
if (this.options.enableClickableOptGroups) { if (this.options.enableClickableOptGroups) {
$li.addClass('multiselect-group-clickable'); $li.addClass('multiselect-group-clickable');
...@@ -765,11 +778,18 @@ ...@@ -765,11 +778,18 @@
var $li = $(this.options.templates.li); var $li = $(this.options.templates.li);
$('label', $li).addClass("checkbox"); $('label', $li).addClass("checkbox");
if (this.options.enableHTML) {
$('label', $li).html(" " + this.options.selectAllText);
}
else {
$('label', $li).text(" " + this.options.selectAllText);
}
if (this.options.selectAllName) { if (this.options.selectAllName) {
$('label', $li).append('<input type="checkbox" name="' + this.options.selectAllName + '" />'); $('label', $li).prepend('<input type="checkbox" name="' + this.options.selectAllName + '" />');
} }
else { else {
$('label', $li).append('<input type="checkbox" />'); $('label', $li).prepend('<input type="checkbox" />');
} }
var $checkbox = $('input', $li); var $checkbox = $('input', $li);
...@@ -779,8 +799,6 @@ ...@@ -779,8 +799,6 @@
$checkbox.parent().parent() $checkbox.parent().parent()
.addClass('multiselect-all'); .addClass('multiselect-all');
$('label', $li).append(" " + this.options.selectAllText);
this.$ul.prepend($li); this.$ul.prepend($li);
$checkbox.prop('checked', false); $checkbox.prop('checked', false);
...@@ -1241,7 +1259,7 @@ ...@@ -1241,7 +1259,7 @@
* @returns {Boolean} * @returns {Boolean}
*/ */
hasSelectAll: function() { hasSelectAll: function() {
return $('li.' + this.options.selectAllValue, this.$ul).length > 0; return $('li.multiselect-all', this.$ul).length > 0;
}, },
/** /**
...@@ -1252,7 +1270,7 @@ ...@@ -1252,7 +1270,7 @@
var allBoxes = $("li:not(.multiselect-item):not(.filter-hidden) input:enabled", this.$ul); var allBoxes = $("li:not(.multiselect-item):not(.filter-hidden) input:enabled", this.$ul);
var allBoxesLength = allBoxes.length; var allBoxesLength = allBoxes.length;
var checkedBoxesLength = allBoxes.filter(":checked").length; var checkedBoxesLength = allBoxes.filter(":checked").length;
var selectAllLi = $("li." + this.options.selectAllValue, this.$ul); var selectAllLi = $("li.multiselect-all", this.$ul);
var selectAllInput = selectAllLi.find("input"); var selectAllInput = selectAllLi.find("input");
if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) { if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
...@@ -1274,7 +1292,12 @@ ...@@ -1274,7 +1292,12 @@
var options = this.getSelected(); var options = this.getSelected();
// First update the displayed button text. // First update the displayed button text.
if (this.options.enableHTML) {
$('.multiselect .multiselect-selected-text', this.$container).html(this.options.buttonText(options, this.$select));
}
else {
$('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonText(options, this.$select)); $('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonText(options, this.$select));
}
// Now update the title attribute of the button. // Now update the title attribute of the button.
$('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select)); $('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));
......
docs/css/prettify.css
View file @ 47110d7e
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
padding: 8px; padding: 8px;
background-color: #f7f7f9; background-color: #f7f7f9;
border: 1px solid #e1e1e8; border: 1px solid #e1e1e8;
max-height: 220px;
overflow-y: auto;
} }
.prettyprint.linenums { .prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
......
index.html
View file @ 47110d7e
...@@ -317,6 +317,64 @@ ...@@ -317,6 +317,64 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr>
<td><code>enableHTML</code></td>
<td>
<p>
XSS injection is a serious thread for all modern web applications. Setting <code>enableHTML</code> to <code>false</code> (default setting) will create a XSS save multiselect.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-xss').multiselect();
});
</script>
<select id="example-xss" multiple="multiple">
<option value="1">&lt;script&gt;alert(1);&lt;/script&gt;</option>
</select>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$('#example-xss').multiselect();
});
&lt;/script&gt;
&lt;select id="example-xss" multiple="multiple"&gt;
&lt;option value="1"&gt;&amp;lt;script&amp;gt;alert(1);&amp;lt;/script&amp;gt;&lt;/option&gt;
&lt;/select&gt;
</pre>
<p>On the other hand, when setting <code>enableHTML</code> to <code>true</code>, the plugin will support HTML within <code>option</code>s:</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-xss-html').multiselect({
nonSelectedText: '<span style="color:red;">Non selected ...</span>',
enableHTML: true
});
});
</script>
<select id="example-xss-html" multiple="multiple">
<option value="1">&lt;span style=&quot;color:red&quot;&gt;Option 1&lt;/span&gt;</option>
</select>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type="text/javascript"&gt;
$(doclect&gt;
</pre>ument).ready(function() {
$('#example-xss-html').multiselect();
});
&lt;/script&gt;
&lt;select id="example-xss-html" multiple="multiple"&gt;
&lt;option value="1"&gt;&amp;gt;span style="color:red"&amp;lt;Option 1&amp;gt;/span&amp;gt;&lt;/option&gt;
&lt;/select&gt;
</pre>
</td>
</tr>
<tr> <tr>
<td><code>enableClickableOptGroups</code></td> <td><code>enableClickableOptGroups</code></td>
<td> <td>
......
tests/spec/bootstrap-multiselect.js
View file @ 47110d7e
...@@ -3,7 +3,7 @@ describe('Bootstrap Multiselect "Core".', function() { ...@@ -3,7 +3,7 @@ describe('Bootstrap Multiselect "Core".', function() {
var $select = $('<select id="multiselect" multiple="multiple"></select>'); var $select = $('<select id="multiselect" multiple="multiple"></select>');
for (var i = 1; i < 100; i++) { for (var i = 1; i < 100; i++) {
var $option = $('<option value="' + i + '">1</option>'); var $option = $('<option value="' + i + '">' + i + '</option>');
if (i < 10) { if (i < 10) {
$option.prop('selected', true); $option.prop('selected', true);
......
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