Animated and Cross Device jQuery Dropdown Select Box

Hemant Negi February 16, 2023

ADN
animated-and-cross-device-jquery-dropdown-select-box

Live Preview Download

Sumoselect is a jQuery plugin which turns the native select box into a responsive, animated, fully customizable dropdown select list.

Sumoselect Features

  • Easily customizable CSS and Javascript code
  • CSS3 Animated dropdown transition effects
  • Auto resizes the dropdown list to fit the browser window
  • Allows to select multiple items by clicking the checkboxes & Search item
  • Supports cross-devices (both desktop and mobile)
  • Placeholder and callbacks supported

Sumoselect Implementation

Include the latest version of jQuery library in the web page.

    

Include the jQuery Sumoselect plugin's CSS and jQuery library files to your HTML

    
    
    
        
        
        Sumoselect Demo | Devstoc
        
    
    
    
    
    
    
    

Create a multiple select list following the Html structure like this.

    

Call the plugin to enable the dropdown select list.

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

Options and callbacks

    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                                      
    };

API methods & Events

    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
    });

 

Next: Best Website rank tracker

also view other related posts,