fixes #41: escape special chars

js/jquery.multi-select.js

@@ -1,5 +1,5 @@
 /*
-* MultiSelect v0.9.2
+* MultiSelect v0.9.3
 * Copyright (c) 2012 Louis Cuny
 *
 * This program is free software. It comes without any warranty, to
@@ -104,9 +104,19 @@
             var selectableLi = $('<li '+attributes+'><span>'+$(this).text()+'</span></li>'),
                 selectedLi = selectableLi.clone();
 
-            var value = $(this).val();
-            selectableLi.addClass('ms-elem-selectable').attr('id', value+'-selectable');
-            selectedLi.addClass('ms-elem-selection').attr('id', value+'-selection').hide();
+            var value = $(this).val(),
+                msId = that.sanitize(value);
+
+            selectableLi
+              .data('ms-value', value)
+              .addClass('ms-elem-selectable')
+              .attr('id', msId+'-selectable');
+
+            selectedLi
+              .data('ms-value', value)
+              .addClass('ms-elem-selection')
+              .attr('id', msId+'-selection')
+              .hide();
 
             that.$selectionUl.find('.ms-optgroup-label').hide();
 
@@ -147,17 +157,17 @@
 
         if(that.options.dblClick) {
           that.$selectableUl.on('dblclick', '.ms-elem-selectable', function(){
-            that.select($(this).attr('id').replace(/-selectable/, ''));
+            that.select($(this).data('ms-value'));
           });
           that.$selectionUl.on('dblclick', '.ms-elem-selection', function(){
-            that.deselect($(this).attr('id').replace(/-selection/, ''));
+            that.deselect($(this).data('ms-value'));
           });
         } else {
           that.$selectableUl.on('click', '.ms-elem-selectable', function(){
-            that.select($(this).attr('id').replace(/-selectable/, ''));
+            that.select($(this).data('ms-value'));
           });
           that.$selectionUl.on('click', '.ms-elem-selection', function(){
-            that.deselect($(this).attr('id').replace(/-selection/, ''));
+            that.deselect($(this).data('ms-value'));
           });
         }
 
@@ -273,17 +283,20 @@
         that.options.afterInit.call(this, this.$container);
       }
     },
+
     'refresh' : function() {
       $("#ms-"+this.$element.attr("id")).remove();
       this.init(this.options);
     },
+
     'select' : function(value, method){
       if (typeof value == 'string')
         value = [value]
       var that = this,
           ms = this.$element,
-          selectables = this.$selectableUl.find('#' + value.join('-selectable, #')+'-selectable').filter(':not(.'+that.options.disabledClass+')'),
-          selections = this.$selectionUl.find('#' + value.join('-selection, #') + '-selection'),
+          msIds = $.map(value, function(val, index){ return(that.sanitize(val)) }),
+          selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable').filter(':not(.'+that.options.disabledClass+')'),
+          selections = this.$selectionUl.find('#' + msIds.join('-selection, #') + '-selection'),
           options = ms.find('option').filter(function(index){ return($.inArray(this.value, value) > -1) });
 
       if (selectables.length > 0){
@@ -318,13 +331,15 @@
         }
       }
     },
+
     'deselect' : function(value){
       if (typeof value == 'string')
         value = [value]
       var that = this,
           ms = this.$element,
-          selectables = this.$selectableUl.find('#' + value.join('-selectable, #')+'-selectable'),
-          selections = this.$selectionUl.find('#' + value.join('-selection, #')+'-selection').filter('.ms-selected'),
+          msIds = $.map(value, function(val, index){ return(that.sanitize(val)) }),
+          selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable'),
+          selections = this.$selectionUl.find('#' + msIds.join('-selection, #')+'-selection').filter('.ms-selected'),
           options = ms.find('option').filter(function(index){ return($.inArray(this.value, value) > -1) });
 
       if (selections.length > 0){
@@ -357,6 +372,7 @@
         }
       }
     },
+
     'select_all' : function(){
       var ms = this.$element;
 
@@ -369,6 +385,7 @@
       this.$selectableUl.focusout();
       ms.trigger('change');
     },
+
     'deselect_all' : function(){
       var ms = this.$element;
 
@@ -381,13 +398,18 @@
       this.$selectionUl.focusout();
       ms.trigger('change');
     },
+
     isDomNode: function (attr){
       return (
         attr &&
         typeof attr === "object" &&
         typeof attr.nodeType === "number" &&
         typeof attr.nodeName === "string"
       );
+    },
+
+    sanitize: function(value){
+      return(value.replace(/[^A-Za-z0-9]*/gi, '_'));
     }
   }
 

test/spec/SpecHelper.js

@@ -11,4 +11,8 @@ beforeEach(function() {
 
 afterEach(function () {
   $("#multi-select, #multi-select-optgroup, .ms-container").remove();
-});
+});
+
+sanitize = function(value){
+  return(value.replace(/[^A-Za-z0-9]*/gi, '_'));
+}

test/spec/multiSelectSpec.js

@@ -55,7 +55,7 @@ describe("multiSelect", function() {
 
       it ('should select the pre-selected options', function(){
         $.each(selectedValues, function(index, value){
-          expect($('.ms-selectable ul.ms-list li#'+value+'-selectable')).toBe('.ms-selected');
+          expect($('.ms-selectable ul.ms-list li#'+sanitize(value)+'-selectable')).toBe('.ms-selected');
         });
         expect($('.ms-selectable ul.ms-list li.ms-selected').length).toEqual(2);
       });
@@ -104,7 +104,7 @@ describe("multiSelect", function() {
           optgroupLabels = optgroupMsContainer.find('.ms-selectable .ms-optgroup-label');
         });
 
-        it ('should do select all nested options when clicking on optgroup', function(){
+        it ('should select all nested options when clicking on optgroup', function(){
           var clickedOptGroupLabel = optgroupLabels.first();
           clickedOptGroupLabel.trigger('click');
           expect(optgroupSelect.val().length).toBe(10);
@@ -147,7 +147,7 @@ describe("multiSelect", function() {
       beforeEach(function() {
         $('#multi-select').multiSelect();
         clickedItem = $('.ms-selectable ul.ms-list li').first();
-        value = clickedItem.attr('id').replace('-selectable', '');
+        value = clickedItem.data('ms-value');
         spyOnEvent(select, 'change');
         spyOnEvent(select, 'focus');
         clickedItem.trigger('click');
@@ -166,7 +166,7 @@ describe("multiSelect", function() {
       });
 
       it('should show the associated selected item', function(){
-        expect($('#'+value+'-selection')).toBe(':visible');
+        expect($('#'+sanitize(value)+'-selection')).toBe(':visible');
       });
 
       it('should trigger the original select change event', function(){