Added remove button on multiple select choices

dist/css/select2.css

@@ -94,6 +94,13 @@
       margin-right: 5px;
       margin-bottom: 5px;
       padding: 0 5px; }
+      .select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove {
+        color: #999;
+        display: inline-block;
+        font-weight: bold;
+        margin-right: 2px; }
+        .select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove:hover {
+          color: #333; }
 .select2-container.select2-theme-default.open .selection .single-select, .select2-container.select2-theme-default.open .selection .multiple-select {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0; }

dist/js/select2.amd.full.js

@@ -266,6 +266,14 @@ define('select2/results',[
       self.setClasses();
     });
 
+    container.on('select', function () {
+      self.setClasses();
+    });
+
+    container.on('unselect', function () {
+      self.setClasses();
+    });
+
     this.$results.on('mouseup', '.option.selectable', function (evt) {
       var $this = $(this);
 
@@ -276,8 +284,6 @@ define('select2/results',[
           data: data
         });
 
-        self.setClasses();
-
         return;
       }
 
@@ -285,8 +291,6 @@ define('select2/results',[
         originalEvent: evt,
         data: data
       });
-
-      self.setClasses();
     });
 
     this.$results.on('mouseenter', '.option.highlightable', function (evt) {
@@ -406,6 +410,18 @@ define('select2/selection/multiple',[
       });
     });
 
+    this.$selection.on('click', '.remove', function (evt) {
+      var $remove = $(this);
+      var $selection = $remove.parent();
+
+      var data = $selection.data('data');
+
+      self.trigger('unselected', {
+        originalEvent: evt,
+        data: data
+      });
+    });
+
     container.on('selection:update', function (params) {
       self.update(params.data);
     });
@@ -420,7 +436,13 @@ define('select2/selection/multiple',[
   };
 
   MultipleSelection.prototype.selectionContainer = function () {
-    return $('<li class="choice"></li>');
+    var $container = $(
+      '<li class="choice">' +
+        '<span class="remove">&times;</span>' +
+      '</li>'
+    );
+
+    return $container;
   };
 
   MultipleSelection.prototype.update = function (data) {
@@ -436,11 +458,10 @@ define('select2/selection/multiple',[
       var selection = data[d];
 
       var formatted = this.display(selection);
-
       var $selection = this.selectionContainer();
 
-      $selection.text(formatted);
-      $selection.data('data', data);
+      $selection.append(formatted);
+      $selection.data('data', selection);
 
       $selections.push($selection);
     }
@@ -1057,6 +1078,12 @@ define('select2/core',[
       self.toggleDropdown();
     });
 
+    this.selection.on('unselected', function (params) {
+      self.trigger('unselect', params);
+
+      self.trigger('close');
+    });
+
     this.results.on('selected', function (params) {
       self.trigger('select', params);
 

dist/js/select2.amd.js

@@ -266,6 +266,14 @@ define('select2/results',[
       self.setClasses();
     });
 
+    container.on('select', function () {
+      self.setClasses();
+    });
+
+    container.on('unselect', function () {
+      self.setClasses();
+    });
+
     this.$results.on('mouseup', '.option.selectable', function (evt) {
       var $this = $(this);
 
@@ -276,8 +284,6 @@ define('select2/results',[
           data: data
         });
 
-        self.setClasses();
-
         return;
       }
 
@@ -285,8 +291,6 @@ define('select2/results',[
         originalEvent: evt,
         data: data
       });
-
-      self.setClasses();
     });
 
     this.$results.on('mouseenter', '.option.highlightable', function (evt) {
@@ -406,6 +410,18 @@ define('select2/selection/multiple',[
       });
     });
 
+    this.$selection.on('click', '.remove', function (evt) {
+      var $remove = $(this);
+      var $selection = $remove.parent();
+
+      var data = $selection.data('data');
+
+      self.trigger('unselected', {
+        originalEvent: evt,
+        data: data
+      });
+    });
+
     container.on('selection:update', function (params) {
       self.update(params.data);
     });
@@ -420,7 +436,13 @@ define('select2/selection/multiple',[
   };
 
   MultipleSelection.prototype.selectionContainer = function () {
-    return $('<li class="choice"></li>');
+    var $container = $(
+      '<li class="choice">' +
+        '<span class="remove">&times;</span>' +
+      '</li>'
+    );
+
+    return $container;
   };
 
   MultipleSelection.prototype.update = function (data) {
@@ -436,11 +458,10 @@ define('select2/selection/multiple',[
       var selection = data[d];
 
       var formatted = this.display(selection);
-
       var $selection = this.selectionContainer();
 
-      $selection.text(formatted);
-      $selection.data('data', data);
+      $selection.append(formatted);
+      $selection.data('data', selection);
 
       $selections.push($selection);
     }
@@ -1057,6 +1078,12 @@ define('select2/core',[
       self.toggleDropdown();
     });
 
+    this.selection.on('unselected', function (params) {
+      self.trigger('unselect', params);
+
+      self.trigger('close');
+    });
+
     this.results.on('selected', function (params) {
       self.trigger('select', params);
 

dist/js/select2.full.js

@@ -9804,6 +9804,14 @@ define('select2/results',[
       self.setClasses();
     });
 
+    container.on('select', function () {
+      self.setClasses();
+    });
+
+    container.on('unselect', function () {
+      self.setClasses();
+    });
+
     this.$results.on('mouseup', '.option.selectable', function (evt) {
       var $this = $(this);
 
@@ -9814,8 +9822,6 @@ define('select2/results',[
           data: data
         });
 
-        self.setClasses();
-
         return;
       }
 
@@ -9823,8 +9829,6 @@ define('select2/results',[
         originalEvent: evt,
         data: data
       });
-
-      self.setClasses();
     });
 
     this.$results.on('mouseenter', '.option.highlightable', function (evt) {
@@ -9944,6 +9948,18 @@ define('select2/selection/multiple',[
       });
     });
 
+    this.$selection.on('click', '.remove', function (evt) {
+      var $remove = $(this);
+      var $selection = $remove.parent();
+
+      var data = $selection.data('data');
+
+      self.trigger('unselected', {
+        originalEvent: evt,
+        data: data
+      });
+    });
+
     container.on('selection:update', function (params) {
       self.update(params.data);
     });
@@ -9958,7 +9974,13 @@ define('select2/selection/multiple',[
   };
 
   MultipleSelection.prototype.selectionContainer = function () {
-    return $('<li class="choice"></li>');
+    var $container = $(
+      '<li class="choice">' +
+        '<span class="remove">&times;</span>' +
+      '</li>'
+    );
+
+    return $container;
   };
 
   MultipleSelection.prototype.update = function (data) {
@@ -9974,11 +9996,10 @@ define('select2/selection/multiple',[
       var selection = data[d];
 
       var formatted = this.display(selection);
-
       var $selection = this.selectionContainer();
 
-      $selection.text(formatted);
-      $selection.data('data', data);
+      $selection.append(formatted);
+      $selection.data('data', selection);
 
       $selections.push($selection);
     }
@@ -10595,6 +10616,12 @@ define('select2/core',[
       self.toggleDropdown();
     });
 
+    this.selection.on('unselected', function (params) {
+      self.trigger('unselect', params);
+
+      self.trigger('close');
+    });
+
     this.results.on('selected', function (params) {
       self.trigger('select', params);
 

dist/js/select2.js

@@ -695,6 +695,14 @@ define('select2/results',[
       self.setClasses();
     });
 
+    container.on('select', function () {
+      self.setClasses();
+    });
+
+    container.on('unselect', function () {
+      self.setClasses();
+    });
+
     this.$results.on('mouseup', '.option.selectable', function (evt) {
       var $this = $(this);
 
@@ -705,8 +713,6 @@ define('select2/results',[
           data: data
         });
 
-        self.setClasses();
-
         return;
       }
 
@@ -714,8 +720,6 @@ define('select2/results',[
         originalEvent: evt,
         data: data
       });
-
-      self.setClasses();
     });
 
     this.$results.on('mouseenter', '.option.highlightable', function (evt) {
@@ -835,6 +839,18 @@ define('select2/selection/multiple',[
       });
     });
 
+    this.$selection.on('click', '.remove', function (evt) {
+      var $remove = $(this);
+      var $selection = $remove.parent();
+
+      var data = $selection.data('data');
+
+      self.trigger('unselected', {
+        originalEvent: evt,
+        data: data
+      });
+    });
+
     container.on('selection:update', function (params) {
       self.update(params.data);
     });
@@ -849,7 +865,13 @@ define('select2/selection/multiple',[
   };
 
   MultipleSelection.prototype.selectionContainer = function () {
-    return $('<li class="choice"></li>');
+    var $container = $(
+      '<li class="choice">' +
+        '<span class="remove">&times;</span>' +
+      '</li>'
+    );
+
+    return $container;
   };
 
   MultipleSelection.prototype.update = function (data) {
@@ -865,11 +887,10 @@ define('select2/selection/multiple',[
       var selection = data[d];
 
       var formatted = this.display(selection);
-
       var $selection = this.selectionContainer();
 
-      $selection.text(formatted);
-      $selection.data('data', data);
+      $selection.append(formatted);
+      $selection.data('data', selection);
 
       $selections.push($selection);
     }
@@ -1486,6 +1507,12 @@ define('select2/core',[
       self.toggleDropdown();
     });
 
+    this.selection.on('unselected', function (params) {
+      self.trigger('unselect', params);
+
+      self.trigger('close');
+    });
+
     this.results.on('selected', function (params) {
       self.trigger('select', params);
 

src/js/select2/core.js

@@ -72,6 +72,12 @@ define([
       self.toggleDropdown();
     });
 
+    this.selection.on('unselected', function (params) {
+      self.trigger('unselect', params);
+
+      self.trigger('close');
+    });
+
     this.results.on('selected', function (params) {
       self.trigger('select', params);
 

src/js/select2/results.js

@@ -127,6 +127,14 @@ define([
       self.setClasses();
     });
 
+    container.on('select', function () {
+      self.setClasses();
+    });
+
+    container.on('unselect', function () {
+      self.setClasses();
+    });
+
     this.$results.on('mouseup', '.option.selectable', function (evt) {
       var $this = $(this);
 
@@ -137,8 +145,6 @@ define([
           data: data
         });
 
-        self.setClasses();
-
         return;
       }
 
@@ -146,8 +152,6 @@ define([
         originalEvent: evt,
         data: data
       });
-
-      self.setClasses();
     });
 
     this.$results.on('mouseenter', '.option.highlightable', function (evt) {

src/js/select2/selection/multiple.js

@@ -31,6 +31,18 @@ define([
       });
     });
 
+    this.$selection.on('click', '.remove', function (evt) {
+      var $remove = $(this);
+      var $selection = $remove.parent();
+
+      var data = $selection.data('data');
+
+      self.trigger('unselected', {
+        originalEvent: evt,
+        data: data
+      });
+    });
+
     container.on('selection:update', function (params) {
       self.update(params.data);
     });
@@ -45,7 +57,13 @@ define([
   };
 
   MultipleSelection.prototype.selectionContainer = function () {
-    return $('<li class="choice"></li>');
+    var $container = $(
+      '<li class="choice">' +
+        '<span class="remove">&times;</span>' +
+      '</li>'
+    );
+
+    return $container;
   };
 
   MultipleSelection.prototype.update = function (data) {
@@ -61,11 +79,10 @@ define([
       var selection = data[d];
 
       var formatted = this.display(selection);
-
       var $selection = this.selectionContainer();
 
-      $selection.text(formatted);
-      $selection.data('data', data);
+      $selection.append(formatted);
+      $selection.data('data', selection);
 
       $selections.push($selection);
     }

src/scss/theme/default/layout.scss

@@ -43,6 +43,18 @@
           margin-right: 5px;
           margin-bottom: 5px;
           padding: 0 5px;
+
+          .remove {
+            color: #999;
+            display: inline-block;
+            font-weight: bold;
+
+            margin-right: 2px;
+
+            &:hover {
+              color: #333;
+            }
+          }
         }
       }
     }