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

$(function () {
     /**
     * Load the country mSelect
     */
    $('#country_id').mSelect({
        url: 'ajax/example1.php',
        returnSelectedLabels: {     // Activate to return the selected labels
            enable: true
        },
        onDropdownShow: function () {
            console.log('======= mSelect country is opened =======');
        },
        onDropdownHide: function(selectedIds, selectedLabels) { 
            console.log('======= mSelect country is closed =======');
            console.log('------- selectedIds country -------------');
            console.log(selectedIds);
            console.log('------- selectedLabels country ----------');
            console.log(selectedLabels);  
        },
        onChange: function(selectedIds, selectedLabels) { 
            console.log('======= onChange mSelect country =======');
            console.log('------- selectedIds country -------------');
            console.log(selectedIds);
            console.log('------- selectedLabels country ----------');
            console.log(selectedLabels); 
        }
    });

    /**
     * Load the state mSelect
     */
    $('#state_id').mSelect({
        url: 'ajax/example14.php?q=states',
        data: {'country_id': 231},
        returnSelectedLabels: {  // Activate to return the selected labels
            enable: true
        },
        onDropdownShow: function () {
            console.log('======= mSelect state is opened =======');
        },
        onDropdownHide: function(selectedIds, selectedLabels) {
            console.log('('======= mSelect state is closed ('=======');
            console.log('------- selectedIds state -------------');
            console.log(selectedIds);
            console.log('------- selectedLabels state ----------');
            console.log(selectedLabels); 
        },
        onChange: function(selectedIds, selectedLabels) {   
            console.log('======= onChange mSelect state =======');
            console.log('------- The selectedIds state -------------');
            console.log(selectedIds);
            console.log('------- The selectedLabels state ----------');
            console.log(selectedLabels);  
        }
    });
});