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 @@
onSelectAll: function() {
},
enableHTML: false,
buttonClass: 'btn btn-default',
inheritClass: false,
buttonWidth: 'auto',
......@@ -666,12 +667,19 @@
var $label = $('label', $li);
$label.addClass(inputType);
if (this.options.enableHTML) {
$label.html(" " + label);
}
else {
$label.text(" " + label);
}
var $checkbox = $('<input/>').attr('type', inputType);
if (this.options.checkboxName) {
$checkbox.attr('name', this.options.checkboxName);
}
$label.append($checkbox);
$label.prepend($checkbox);
var selected = $element.prop('selected') || false;
$checkbox.val(value);
......@@ -682,7 +690,6 @@
.addClass('multiselect-all');
}
$label.append(" " + label);
$label.attr('title', $element.attr('title'));
this.$ul.append($li);
......@@ -724,7 +731,13 @@
// Add a header for the group.
var $li = $(this.options.templates.liGroup);
if (this.options.enableHTML) {
$('label', $li).html(groupName);
}
else {
$('label', $li).text(groupName);
}
if (this.options.enableClickableOptGroups) {
$li.addClass('multiselect-group-clickable');
......@@ -765,11 +778,18 @@
var $li = $(this.options.templates.li);
$('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) {
$('label', $li).append('<input type="checkbox" name="' + this.options.selectAllName + '" />');
$('label', $li).prepend('<input type="checkbox" name="' + this.options.selectAllName + '" />');
}
else {
$('label', $li).append('<input type="checkbox" />');
$('label', $li).prepend('<input type="checkbox" />');
}
var $checkbox = $('input', $li);
......@@ -779,8 +799,6 @@
$checkbox.parent().parent()
.addClass('multiselect-all');
$('label', $li).append(" " + this.options.selectAllText);
this.$ul.prepend($li);
$checkbox.prop('checked', false);
......@@ -1241,7 +1259,7 @@
* @returns {Boolean}
*/
hasSelectAll: function() {
return $('li.' + this.options.selectAllValue, this.$ul).length > 0;
return $('li.multiselect-all', this.$ul).length > 0;
},
/**
......@@ -1252,7 +1270,7 @@
var allBoxes = $("li:not(.multiselect-item):not(.filter-hidden) input:enabled", this.$ul);
var allBoxesLength = allBoxes.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");
if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
......@@ -1274,7 +1292,12 @@
var options = this.getSelected();
// 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));
}
// Now update the title attribute of the button.
$('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));
......
docs/css/prettify.css
View file @ 47110d7e
......@@ -11,6 +11,8 @@
padding: 8px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
max-height: 220px;
overflow-y: auto;
}
.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
......
index.html
View file @ 47110d7e
......@@ -317,6 +317,64 @@
</div>
</td>
</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>
<td><code>enableClickableOptGroups</code></td>
<td>
......
tests/spec/bootstrap-multiselect.js
View file @ 47110d7e
......@@ -3,7 +3,7 @@ describe('Bootstrap Multiselect "Core".', function() {
var $select = $('<select id="multiselect" multiple="multiple"></select>');
for (var i = 1; i < 100; i++) {
var $option = $('<option value="' + i + '">1</option>');
var $option = $('<option value="' + i + '">' + i + '</option>');
if (i < 10) {
$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