Skip to content

Commit a07fc21

Browse files
kevin-brownkevin-brown
committed
Added remove button on multiple select choices
1 parent 3d1dc36 commit a07fc21

12 files changed

Lines changed: 198 additions & 44 deletions

File tree

‎dist/css/select2.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,13 @@
9494
margin-right: 5px;
9595
margin-bottom: 5px;
9696
padding: 0 5px; }
97+
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove {
98+
color: #999;
99+
display: inline-block;
100+
font-weight: bold;
101+
margin-right: 2px; }
102+
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove:hover {
103+
color: #333; }
97104
.select2-container.select2-theme-default.open .selection .single-select, .select2-container.select2-theme-default.open .selection .multiple-select {
98105
border-bottom-left-radius: 0;
99106
border-bottom-right-radius: 0; }

‎dist/css/select2.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/select2.amd.full.js‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,14 @@ define('select2/results',[
266266
self.setClasses();
267267
});
268268

269+
container.on('select', function () {
270+
self.setClasses();
271+
});
272+
273+
container.on('unselect', function () {
274+
self.setClasses();
275+
});
276+
269277
this.$results.on('mouseup', '.option.selectable', function (evt) {
270278
var $this = $(this);
271279

@@ -276,17 +284,13 @@ define('select2/results',[
276284
data: data
277285
});
278286

279-
self.setClasses();
280-
281287
return;
282288
}
283289

284290
self.trigger('selected', {
285291
originalEvent: evt,
286292
data: data
287293
});
288-
289-
self.setClasses();
290294
});
291295

292296
this.$results.on('mouseenter', '.option.highlightable', function (evt) {
@@ -406,6 +410,18 @@ define('select2/selection/multiple',[
406410
});
407411
});
408412

413+
this.$selection.on('click', '.remove', function (evt) {
414+
var $remove = $(this);
415+
var $selection = $remove.parent();
416+
417+
var data = $selection.data('data');
418+
419+
self.trigger('unselected', {
420+
originalEvent: evt,
421+
data: data
422+
});
423+
});
424+
409425
container.on('selection:update', function (params) {
410426
self.update(params.data);
411427
});
@@ -420,7 +436,13 @@ define('select2/selection/multiple',[
420436
};
421437

422438
MultipleSelection.prototype.selectionContainer = function () {
423-
return $('<li class="choice"></li>');
439+
var $container = $(
440+
'<li class="choice">' +
441+
'<span class="remove">&times;</span>' +
442+
'</li>'
443+
);
444+
445+
return $container;
424446
};
425447

426448
MultipleSelection.prototype.update = function (data) {
@@ -436,11 +458,10 @@ define('select2/selection/multiple',[
436458
var selection = data[d];
437459

438460
var formatted = this.display(selection);
439-
440461
var $selection = this.selectionContainer();
441462

442-
$selection.text(formatted);
443-
$selection.data('data', data);
463+
$selection.append(formatted);
464+
$selection.data('data', selection);
444465

445466
$selections.push($selection);
446467
}
@@ -1057,6 +1078,12 @@ define('select2/core',[
10571078
self.toggleDropdown();
10581079
});
10591080

1081+
this.selection.on('unselected', function (params) {
1082+
self.trigger('unselect', params);
1083+
1084+
self.trigger('close');
1085+
});
1086+
10601087
this.results.on('selected', function (params) {
10611088
self.trigger('select', params);
10621089

‎dist/js/select2.amd.js‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,14 @@ define('select2/results',[
266266
self.setClasses();
267267
});
268268

269+
container.on('select', function () {
270+
self.setClasses();
271+
});
272+
273+
container.on('unselect', function () {
274+
self.setClasses();
275+
});
276+
269277
this.$results.on('mouseup', '.option.selectable', function (evt) {
270278
var $this = $(this);
271279

@@ -276,17 +284,13 @@ define('select2/results',[
276284
data: data
277285
});
278286

279-
self.setClasses();
280-
281287
return;
282288
}
283289

284290
self.trigger('selected', {
285291
originalEvent: evt,
286292
data: data
287293
});
288-
289-
self.setClasses();
290294
});
291295

292296
this.$results.on('mouseenter', '.option.highlightable', function (evt) {
@@ -406,6 +410,18 @@ define('select2/selection/multiple',[
406410
});
407411
});
408412

413+
this.$selection.on('click', '.remove', function (evt) {
414+
var $remove = $(this);
415+
var $selection = $remove.parent();
416+
417+
var data = $selection.data('data');
418+
419+
self.trigger('unselected', {
420+
originalEvent: evt,
421+
data: data
422+
});
423+
});
424+
409425
container.on('selection:update', function (params) {
410426
self.update(params.data);
411427
});
@@ -420,7 +436,13 @@ define('select2/selection/multiple',[
420436
};
421437

422438
MultipleSelection.prototype.selectionContainer = function () {
423-
return $('<li class="choice"></li>');
439+
var $container = $(
440+
'<li class="choice">' +
441+
'<span class="remove">&times;</span>' +
442+
'</li>'
443+
);
444+
445+
return $container;
424446
};
425447

426448
MultipleSelection.prototype.update = function (data) {
@@ -436,11 +458,10 @@ define('select2/selection/multiple',[
436458
var selection = data[d];
437459

438460
var formatted = this.display(selection);
439-
440461
var $selection = this.selectionContainer();
441462

442-
$selection.text(formatted);
443-
$selection.data('data', data);
463+
$selection.append(formatted);
464+
$selection.data('data', selection);
444465

445466
$selections.push($selection);
446467
}
@@ -1057,6 +1078,12 @@ define('select2/core',[
10571078
self.toggleDropdown();
10581079
});
10591080

1081+
this.selection.on('unselected', function (params) {
1082+
self.trigger('unselect', params);
1083+
1084+
self.trigger('close');
1085+
});
1086+
10601087
this.results.on('selected', function (params) {
10611088
self.trigger('select', params);
10621089

‎dist/js/select2.full.js‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9804,6 +9804,14 @@ define('select2/results',[
98049804
self.setClasses();
98059805
});
98069806

9807+
container.on('select', function () {
9808+
self.setClasses();
9809+
});
9810+
9811+
container.on('unselect', function () {
9812+
self.setClasses();
9813+
});
9814+
98079815
this.$results.on('mouseup', '.option.selectable', function (evt) {
98089816
var $this = $(this);
98099817

@@ -9814,17 +9822,13 @@ define('select2/results',[
98149822
data: data
98159823
});
98169824

9817-
self.setClasses();
9818-
98199825
return;
98209826
}
98219827

98229828
self.trigger('selected', {
98239829
originalEvent: evt,
98249830
data: data
98259831
});
9826-
9827-
self.setClasses();
98289832
});
98299833

98309834
this.$results.on('mouseenter', '.option.highlightable', function (evt) {
@@ -9944,6 +9948,18 @@ define('select2/selection/multiple',[
99449948
});
99459949
});
99469950

9951+
this.$selection.on('click', '.remove', function (evt) {
9952+
var $remove = $(this);
9953+
var $selection = $remove.parent();
9954+
9955+
var data = $selection.data('data');
9956+
9957+
self.trigger('unselected', {
9958+
originalEvent: evt,
9959+
data: data
9960+
});
9961+
});
9962+
99479963
container.on('selection:update', function (params) {
99489964
self.update(params.data);
99499965
});
@@ -9958,7 +9974,13 @@ define('select2/selection/multiple',[
99589974
};
99599975

99609976
MultipleSelection.prototype.selectionContainer = function () {
9961-
return $('<li class="choice"></li>');
9977+
var $container = $(
9978+
'<li class="choice">' +
9979+
'<span class="remove">&times;</span>' +
9980+
'</li>'
9981+
);
9982+
9983+
return $container;
99629984
};
99639985

99649986
MultipleSelection.prototype.update = function (data) {
@@ -9974,11 +9996,10 @@ define('select2/selection/multiple',[
99749996
var selection = data[d];
99759997

99769998
var formatted = this.display(selection);
9977-
99789999
var $selection = this.selectionContainer();
997910000

9980-
$selection.text(formatted);
9981-
$selection.data('data', data);
10001+
$selection.append(formatted);
10002+
$selection.data('data', selection);
998210003

998310004
$selections.push($selection);
998410005
}
@@ -10595,6 +10616,12 @@ define('select2/core',[
1059510616
self.toggleDropdown();
1059610617
});
1059710618

10619+
this.selection.on('unselected', function (params) {
10620+
self.trigger('unselect', params);
10621+
10622+
self.trigger('close');
10623+
});
10624+
1059810625
this.results.on('selected', function (params) {
1059910626
self.trigger('select', params);
1060010627

‎dist/js/select2.full.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/select2.js‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -695,6 +695,14 @@ define('select2/results',[
695695
self.setClasses();
696696
});
697697

698+
container.on('select', function () {
699+
self.setClasses();
700+
});
701+
702+
container.on('unselect', function () {
703+
self.setClasses();
704+
});
705+
698706
this.$results.on('mouseup', '.option.selectable', function (evt) {
699707
var $this = $(this);
700708

@@ -705,17 +713,13 @@ define('select2/results',[
705713
data: data
706714
});
707715

708-
self.setClasses();
709-
710716
return;
711717
}
712718

713719
self.trigger('selected', {
714720
originalEvent: evt,
715721
data: data
716722
});
717-
718-
self.setClasses();
719723
});
720724

721725
this.$results.on('mouseenter', '.option.highlightable', function (evt) {
@@ -835,6 +839,18 @@ define('select2/selection/multiple',[
835839
});
836840
});
837841

842+
this.$selection.on('click', '.remove', function (evt) {
843+
var $remove = $(this);
844+
var $selection = $remove.parent();
845+
846+
var data = $selection.data('data');
847+
848+
self.trigger('unselected', {
849+
originalEvent: evt,
850+
data: data
851+
});
852+
});
853+
838854
container.on('selection:update', function (params) {
839855
self.update(params.data);
840856
});
@@ -849,7 +865,13 @@ define('select2/selection/multiple',[
849865
};
850866

851867
MultipleSelection.prototype.selectionContainer = function () {
852-
return $('<li class="choice"></li>');
868+
var $container = $(
869+
'<li class="choice">' +
870+
'<span class="remove">&times;</span>' +
871+
'</li>'
872+
);
873+
874+
return $container;
853875
};
854876

855877
MultipleSelection.prototype.update = function (data) {
@@ -865,11 +887,10 @@ define('select2/selection/multiple',[
865887
var selection = data[d];
866888

867889
var formatted = this.display(selection);
868-
869890
var $selection = this.selectionContainer();
870891

871-
$selection.text(formatted);
872-
$selection.data('data', data);
892+
$selection.append(formatted);
893+
$selection.data('data', selection);
873894

874895
$selections.push($selection);
875896
}
@@ -1486,6 +1507,12 @@ define('select2/core',[
14861507
self.toggleDropdown();
14871508
});
14881509

1510+
this.selection.on('unselected', function (params) {
1511+
self.trigger('unselect', params);
1512+
1513+
self.trigger('close');
1514+
});
1515+
14891516
this.results.on('selected', function (params) {
14901517
self.trigger('select', params);
14911518

‎dist/js/select2.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)