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

$(function () {
    /**
     * load country mSelect
     */
    $('#country_id').mSelect({
        url: 'ajax/example1.php',
        returnSelectedLabels: {     // Activate to return the selected labels
            enable: true,
            uniqueLabel: true 
        },
        onDropdownShow: function() {   
            // do something here...
        },
        onDropdownHide: function(selectedIds, selectedLabels) {    
            // do something here...
        },
        onChange: function(selectedIds, selectedLabels) {
            // do something here...
        }
    });

    /**
     * load country mSelect
     */
    var state_id = $('#state_id').mSelect({
        url: 'ajax/example14.php',
        data: {'country_id': 231},
        returnSelectedLabels: {     // Activate to return the selected labels
            enable: true,
            uniqueLabel: true 
        },
        onDropdownShow: function() {   
            // do something here...
        },
        onDropdownHide: function(selectedIds, selectedLabels) {    
            // do something here...
        },
        onChange: function(selectedIds, selectedLabels) {
            // do something here...
        }
    });

    /**
     * country methods
     */
    $(document).on("click", '.action_country', function(event) {
        var action = $(this).attr('data-action');
        if(action === 'get_id'){
            var ids = country_id.getSelectedIds();
            console.log(ids);
        }
        else if(action === 'labels'){
            var labels = country_id.getSelectedLabels();
            console.log(labels);
        }
        else if(action === 'unique-labels'){
            var labels = country_id.getUniqueSelectedLabels();
            console.log(labels);    
        }
        else if(action === 'set_color'){
            country_id.setCSS('background:#ffeb54;border:1px solid #666;');
        }
        else if(action === 'remove_color'){
            country_id.setCSS(null);
        }
        else if(action === 'enable'){
            country_id.mSelect('enable');  // enable the mSelect
        }
        else if(action === 'disable'){
            country_id.mSelect('disable');  // disable the mSelect
        }
        
        else if(action === 'show'){
            country_id.mSelect('show');  // show the mSelect
        }
        else if(action === 'hide'){
            country_id.mSelect('hide'); // hide the mSelect
        }
        else if(action === 'set_id'){
            country_id.setSelectedIds(["3", "7", "8"]); // auto select the ids 3,7,8 
        }
        else if(action === 'refresh'){
            country_id.mSelect('refresh', {
                disable: false,
                selectedIds: ["8", "10"],
                cssNotEmpty: 'background:#d6ffd1;color:red',
                btnRefresh: true
            });
        }
        else if(action === 'reset'){
            country_id.mSelect('reset');  // reset the mSelect
        }
    }); 

    /**
     * state methods
     */
    $(document).on("click", '.action_state', function(event) {
        var action = $(this).attr('data-action');
        if(action === 'get_id'){
            var ids = state_id.getSelectedIds();
            console.log(ids);
        }
        else if(action === 'labels'){
            var labels = state_id.getSelectedLabels();
            console.log(labels);
        }
        else if(action === 'unique-labels'){
            var labels = state_id.getUniqueSelectedLabels();
            console.log(labels);    
        }
        else if(action === 'set_color'){
            state_id.setCSS('background:yellow;border:1px solid blue');
        }
        else if(action === 'remove_color'){
            state_id.setCSS(null);
        }
        else if(action === 'enable'){
            state_id.mSelect('enable');  // enable the mSelect
        }
        else if(action === 'disable'){
            state_id.mSelect('disable');  // disable the mSelect
        }
        else if(action === 'show'){
            state_id.mSelect('show');  // show the mSelect
        }
        else if(action === 'hide'){
            state_id.mSelect('hide'); // hide the mSelect
        }
        else if(action === 'set_id'){
            state_id.setSelectedIds(null); // equivalent to mSelect('reset')
        }
        else if(action === 'refresh'){
            state_id.mSelect('refresh', {
                data: {'country_id': 231},
                selectedIds: ["3920"],
                lengthMenu: [5, 7, 30]
            });
        }
        else if(action === 'reset'){
            state_id.mSelect('reset');  // reset the mSelect
        }
    });    

});