Animated and Cross Device jQuery Dropdown Select Box

    
        Apple
        Symbion
        Windows
        RedHat
        Ubuntu
    

    $('.form-select').SumoSelect(options);

    var options = {
        // Dont change it here.
        placeholder: 'Select an OS',   
        
        // display no. of items in multiselect. 0 to display all.
        csvDispCount: 4,              
        
        // format of caption text. you can set your locale.
        captionFormat:'{0} Selected', 
        
        // format of caption text when all elements are selected. set null to use captionFormat. It will not work if there are disabled elements in select.
        captionFormatAllSelected:'{0} all selected!', 
        
        // Screen width of device at which the list is rendered in floating popup fashion.
        floatWidth: 400,              
        
        // force the custom modal on all devices below floatWidth resolution.
        forceCustomRendering: false, 
        
        nativeOnDevice: ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'], 
        
        // true to POST data as csv ( false for Html control array ie. deafault select )
        outputAsCSV: false,      
        
        // seperation char in csv mode     
        csvSepChar: ',',     
        
        // display ok cancel buttons in desktop mode multiselect also.         
        okCancelInMulti: false,       
        
        // for okCancelInMulti=true. sets whether click outside will trigger Ok or Cancel (default is cancel).
        isClickAwayOk: false,         
        
        // im multi select mode wether to trigger change event on individual selection or combined selection.
        triggerChangeCombined: true,  
        
        // to display select all button in multiselect mode.|| also select all will not be available on mobile devices.
        selectAll: false,
        
        // Display a disabled checkbox in multiselect mode when all the items are not selected.
        selectAllPartialCheck: true,     
        
        // to display input for filtering content. selectAlltext will be input text placeholder
        search: false,                
        
        // placeholder for search input
        searchText: 'Search...',      
        
        searchFn: function(haystack, needle) { // search function
          return haystack.toLowerCase().indexOf(needle.toLowerCase()) < 0;
        },
        
        noMatch: 'No matches for "{0}"',
        
        // some prefix usually the field name. eg. '>b/b<'
        prefix: '',                   
        
        // all text that is used. don't change the index.
        locale: ['OK', 'Cancel', 'Select All'],  
        
        // set true to open upside.
        up: false,
        
        // set to false to prevent title (tooltip) from appearing
        showTitle: true,
        
        // im multi select - clear all checked options
        clearAll: false,         
        
        // im multi select - close select after clear
        closeAfterClearAll: false,  
        
        // Maximum number of options selected (when multiple)  
        max: null,     
                       
        // Custom >li< item renderer
        renderLi: (li, _originalOption) => li                                      
    };

    var devstocSelect = $('.form-select').SumoSelect(options);
    
    // add a new item
    devstocSelect.add(value [,text][,index])
    
    // remove an item
    devstocSelect.remove(index)
    
    // select an item
    devstocSelect.selectItem(index/value)
    
    // unselect an item
    devstocSelect.unSelectItem(index/value)
    
    // disable an item
    devstocSelect.disableItem(index)
    
    // re-enable an item
    devstocSelect.enableItem(index)
    
    // select all items
    devstocSelect.selectAll()
    
    // unselect all items
    devstocSelect.unSelectAll()
    
    // enable the plugin
    devstocSelect.enable()
    
    // disable the plugin
    devstocSelect.disable()
    
    // reload the plugin
    devstocSelect.reload()

    /*
     * EVENTS
     *
     */

    $('.form-select').on('sumo:opened', function(ds) {
      // your code here
    });

    $('.form-select').on('sumo:opening', function(ds) {
      // your code here
    });

    $('.form-select').on('sumo:closed', function(ds) {
      // your code here
    });

    $('.form-select').on('sumo:closing', function(ds) {
      // your code here
    });