The select2 item cannot selected

Question

• Why my select2's items cannot be selected.
• You can copy my code and save as html, run it by yourself.
• And you can see the demo online at http://devhelp.duapp.com/select2/

my html and js code

<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link href="http://cdn.bootcss.com/select2/3.4.5/select2.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/select2/3.4.5/select2.min.js"></script>
<input type="hidden" name="originPlace" value="" />
<a href="http://devhelp.duapp.com/select2">demo online</a>
<script >
$(document).ready(function() {    
    $('input[name=originPlace]').select2({
        placeholder: "please select country or city",
        minimumInputLength: 2,
        width: 300,
        ajax: {
            url: 'http://devhelp.duapp.com/select2/data.php',
            dataType: 'jsonp',
            data: function(term, page) {
                return {query: term,locale:'en-GB'};
            },
            results: function(data, page) {
                if (data.status == 1) {
                    return {results: data.data.Places};
                } else {
                    return{results: {}};
                }
            }
        },
        formatResult: formatSelectSelect,
        formatSelection: formatSelectSelect
    });
    function formatSelectSelect(data){
            var liStr = "";
            if (data.CityId === "-sky") {
                liStr = data.PlaceName + "(ALL)-" + data.PlaceId.replace('-sky', '');
            } else {
                liStr = data.PlaceName + "[" + data.CountryName + "]-" + data.PlaceId.replace('-sky', '');
            }
            return liStr;
    }
});
</script>

Answer 1

Here is a jsfiddle of it working: http://jsfiddle.net/tk5446/kvLd6/

Just needed to add the "id" entry like so:

id: function(bond){return {id: bond._id};},