select2.js multiple

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<select multiple id="country" name="country" style="width:300px">
    <option></option>
    <option value="1">USA</option>
    <option value="2">Untied Kingdom</option>
    <option value="3">France</option>    
</select>

<select id="state" style="width:300px">

</select>

JavaScript

$("#country").select2();
$("#state").select2();

$('#country').change(function() {
    
    var data = [{"id":"1","text":"Chigaco"},{"id":"4","text":"Albama"},{"id":"2","text":"Tulsa"}];
    var data2=[];
    $.map(data, function(item) {
                            data2.push( { id: item.id, text: item.text }); 
                        });
                        $('#state').select2({
                            data: data2
                        });
            


    });