Fix plain text stored to HTML

Fixes most of #148

1 files changed, 33 insertions, 32 deletions

diff --git a/jquery.multiple.select.js b/jquery.multiple.select.js
index 03db7db..7d2278c 100644
--- a/jquery.multiple.select.js
+++ b/jquery.multiple.select.js
@@ -60,18 +60,17 @@
         constructor: MultipleSelect,
 
         init: function () {
-            var that = this,
-                html = [];
+            var that = this;
             if (this.options.filter) {
-                html.push(
+                this.$drop.append(
                     '<div class="ms-search">',
                     '<input type="text" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false">',
                     '</div>'
                 );
             }
-            html.push('<ul>');
+            var ul = $('<ul></ul>');
             if (this.options.selectAll && !this.options.single) {
-                html.push(
+                ul.append(
                     '<li class="ms-select-all">',
                     '<label>',
                     '<input type="checkbox" ' + this.selectAllName + ' /> ',
@@ -81,11 +80,10 @@
                 );
             }
             $.each(this.$el.children(), function (i, elm) {
-                html.push(that.optionToHtml(i, elm));
+                ul.append(that.optionToHtml(i, elm));
             });
-            html.push('<li class="ms-no-results">' + this.options.noMatchesFound + '</li>');
-            html.push('</ul>');
-            this.$drop.html(html.join(''));
+            ul.append('<li class="ms-no-results">' + this.options.noMatchesFound + '</li>');
+            this.$drop.append(ul);
 
             this.$drop.find('ul').css('max-height', this.options.maxHeight + 'px');
             this.$drop.find('.multiple').css('width', this.options.multipleWidth + 'px');
@@ -108,7 +106,6 @@
         optionToHtml: function (i, elm, group, groupDisabled) {
             var that = this,
                 $elm = $(elm),
-                html = [],
                 multiple = this.options.multiple,
                 optAttributesToCopy = ['class', 'title'],
                 clss = $.map(optAttributesToCopy, function (att, i) {
@@ -129,45 +126,49 @@
 
                 disabled = groupDisabled || $elm.prop('disabled');
                 if ((this.options.blockSeparator > "") && (this.options.blockSeparator == $elm.val())) {
-                    html.push(
+                    var li = $(
                         '<li' + clss + style + '>',
                         '<label class="' + this.options.blockSeparator + (disabled ? 'disabled' : '') + '">',
-                        text,
                         '</label>',
                         '</li>'
                     );
+                    li.find('label').append(document.createTextNode(text));
+                    return li;
                 } else {
-                    html.push(
-                        '<li' + clss + style + '>',
-                        '<label' + (disabled ? ' class="disabled"' : '') + '>',
-                        '<input type="' + type + '" ' + this.selectItemName + ' value="' + value + '"' +
+                    var li = $(
+                        '<li' + clss + style + '>' +
+                        '<label' + (disabled ? ' class="disabled"' : '') + '>' +
+                        '<input type="' + type + '" ' + this.selectItemName +
                             (selected ? ' checked="checked"' : '') +
                             (disabled ? ' disabled="disabled"' : '') +
                             (group ? ' data-group="' + group + '"' : '') +
-                            '/> ',
-                        text,
-                        '</label>',
-                        '</li>'
-                    );
+                            '/> ' +
+                        '</label>' +
+                        '</li>');
+                    li.find('input').val(value);
+                    li.find('label').append(document.createTextNode(text));
+                    return li;
                 }
             } else if (!group && $elm.is('optgroup')) {
                 var _group = 'group_' + i,
                     label = $elm.attr('label');
 
                 disabled = $elm.prop('disabled');
-                html.push(
-                    '<li class="group">',
-                    '<label class="optgroup' + (disabled ? ' disabled' : '') + '" data-group="' + _group + '">',
+                var group = $('<div/>');
+                group.append(
+                    '<li class="group">' +
+                    '<label class="optgroup' + (disabled ? ' disabled' : '') + '" data-group="' + _group + '">' +
                     (this.options.hideOptgroupCheckboxes ? '' : '<input type="checkbox" ' + this.selectGroupName +
-                        (disabled ? ' disabled="disabled"' : '') + ' /> '),
-                    label,
-                    '</label>',
+                        (disabled ? ' disabled="disabled"' : '') + ' /> ') +
+                    label +
+                    '</label>' +
                     '</li>');
+                li.find('label').append(document.createTextNode(text));
                 $.each($elm.children(), function (i, elm) {
-                    html.push(that.optionToHtml(i, elm, _group, disabled));
+                    group.append(that.optionToHtml(i, elm, _group, disabled));
                 });
+                return group.html();
             }
-            return html.join('');
         },
 
         events: function () {
@@ -313,7 +314,7 @@
             if (selects.length === 0) {
                 $span.addClass('placeholder').html(this.options.placeholder);
             } else if (this.options.countSelected && selects.length < this.options.minimumCountSelected) {
-                $span.removeClass('placeholder').html(
+                $span.removeClass('placeholder').text(
                     (this.options.displayValues ? selects : this.getSelects('text'))
                         .join(this.options.delimiter));
             } else if (this.options.allSelected &&
@@ -321,7 +322,7 @@
                 $span.removeClass('placeholder').html(this.options.allSelected);
             } else if ((this.options.countSelected || this.options.etcaetera) && selects.length > this.options.minimumCountSelected) {
                 if (this.options.etcaetera) {
-                    $span.removeClass('placeholder').html((this.options.displayValues ? selects : this.getSelects('text').slice(0, this.options.minimumCountSelected)).join(this.options.delimiter) + '...');
+                    $span.removeClass('placeholder').text((this.options.displayValues ? selects : this.getSelects('text').slice(0, this.options.minimumCountSelected)).join(this.options.delimiter) + '...');
                 }
                 else {
                     $span.removeClass('placeholder').html(this.options.countSelected
@@ -329,7 +330,7 @@
                         .replace('%', this.$selectItems.length + this.$disableItems.length));
                 }
             } else {
-                $span.removeClass('placeholder').html(
+                $span.removeClass('placeholder').text(
                     (this.options.displayValues ? selects : this.getSelects('text'))
                         .join(this.options.delimiter));
             }