javascript - How to make selected option clickable (and toggle-able) in a multiple Select2? -

javascript - How to make selected option clickable (and toggle-able) in a multiple Select2? -

the default behaviour in multiple select2 selected alternative hidden .select2-results ul (which can tweaked via pure css).

.select2-results .select2-selected { display: block !important; position: relative; margin-left: 10px; }

http://jsfiddle.net/3vb6d/

however selected alternative not clickable, too. looking way toggle alternative in dropdown via click.

any , ideas highly appreciated. cheers!

don't edit select2.js. utilize in js:

select2.class.multi.prototype.findhighlightablechoices = function () { homecoming this.results.find(".select2-result-selectable:not(.select2-disabled)"); }; var select2triggerselect = select2.class.multi.prototype.triggerselect; select2.class.multi.prototype.triggerselect = function (data) { if (this.val().indexof(this.id(data)) !== -1) { var val = this.id(data); var evt = $.event("select2-removing"); evt.val = val; evt.choice = data; this.opts.element.trigger(evt); if (evt.isdefaultprevented()) { homecoming false; } var existingvals = this.val(); var self = this; if (!existingvals || existingvals.length == 0) homecoming true; (a = 0; < existingvals.length; a++) { if (existingvals[a] === val) { existingvals[a] = ''; this.val(existingvals); this.results.find('.select2-result').each(function () { var $this = $(this); if (self.id($this.data('select2-data')) === val) { $this.removeclass('select2-selected'); } }); } } this.opts.element.trigger({ type: "select2-removed", val: this.id(data), choice: info }); this.triggerchange({ removed: info }); } else { homecoming select2triggerselect.apply(this, arguments); } }

javascript jquery jquery-select2