Select2 : get selected value/text

Use data to retrieve the ID and Text of the selected option.

by filistea

HTML

<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<input type="hidden" id="test" />
<p>Selected IDs: <span id="selectedID"></span></p>
<p>Selected Options: <span id="selectedText"></span></p>

CSS

p { margin: 1em 0; }

JavaScript

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

$(test).change(function() {
    //var theID = $(test).val(); // works
    //var theSelection = $(test).filter(':selected').text(); // doesn't work
    var theID = $(test).select2('val');
    var theSelection = $(test).select2('data').text;
    $('#selectedID').text(theID);
    $('#selectedText').text(theSelection);
});