Example 28: (Open the Dev Console and check the Log)

This example show you how to:

  • Load the plugin
  • mSelect methods in action


                       
HTML:
<select id="country_id" class="mSelect" multiple="multiple"></select>
JS:
$(function () {
    /**
     * load country mSelect
     */
    $('#country_id').mSelect({
        url: 'ajax/example1.php',
        buttonWidth: '100%',
        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: yellow',
                btnRefresh: true
            });
        }
        else if(action === 'reset'){
            country_id.mSelect('reset');  // reset the mSelect
        }
    }); 

});