<select id="state_id" class="mSelect" multiple="multiple"></select>

$(function () {
    $('#state_id').mSelect({
        url: 'ajax/example11.php',
        columns: ['State Name', 'Country Name', 'Phone Code'],
        minWidth: 550,
        returnSelectedLabels: {  // Activate to return the selected labels
            enable: true 
            indexLabel: 2,       // return the "Country Name" Labels
            uniqueLabel: true    // return the unique labels as well
        },
        onDropdownShow: function () {
            console.log('======= the mSelect is opened =======');
        },
        onDropdownHide: function(selectedIds, selectedLabels, uniqueSelectedLabels) {
            console.log('the mSelect is closed');
            console.log('------- The selectedIds -------------');
            console.log(selectedIds);
            console.log('------- The selectedLabels ----------');
            console.log(selectedLabels); 
            console.log('------- The uniqueSelectedLabels ----');
            console.log(uniqueSelectedLabels);  
        },
        onChange: function(selectedIds, selectedLabels, uniqueSelectedLabels) {   
            console.log('======= onChange mSelect =======');
            console.log('------- The selectedIds -------------');
            console.log(selectedIds);
            console.log('------- The selectedLabels ----------');
            console.log(selectedLabels); 
            console.log('------- The uniqueSelectedLabels ----');
            console.log(uniqueSelectedLabels); 
        }
    });
});