Select2 : multi-select : get selected values/text : data array

Retrieve the selected options in an object array. **Need to figure out how to split/format this to get just the text...

by rity

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<input type="hidden" id="test" />
<p>Selected IDs: <span id="selectedIDs"></span></p>
<p>Selected Options: <span id="selectedText"></span></p>

CSS

p { margin: 1em 0; }
body { margin: 30px; }

JavaScript

var test = $('#test');
$(test).select2({
    data:[
        {id:0,text:"enhancement",extra:"123"},
        {id:1,text:"bug",extra:"1234"},
        {id:2,text:"duplicate",extra:"12345"},
        {id:3,text:"invalid",extra:"123456"},
        {id:4,text:"wontfix",extra:"1234567"}
    ],
    multiple: true,
    width: "300px"
});

$(test).change(function() {
		var ids = '';
    var items = '';
		var selections = $(test).select2('data');
    
		$.each(selections, function (i, item) { 
    	ids += $(item)[0].id + ' ';
    	console.log('Selected ID: ' + $(item)[0].id);
      console.log('Selected option: ' + $(item)[0].text);
      console.log('Additional option: ' + $(item)[0].extra);
    });

    $('#selectedIDs').text(ids);
    $('#selectedText').text(items);

});

$(test).on('select2:select', function (e) {
	// alert('sdf');
    var data = e.params.data.extra;
    console.log(data);
});