Javascript, jQuery, jQuery plugins, Mobile, Tools, Web

A simple crossbrowser, cross device multiselect jQuery plugin – sumoselect

The problem:

Problem appeared to me first, when i was looking for a select plugin for one of my website. My requirements were simple, i want a light jquery plugin which i can customize easily according to my site’s design. Also i want it to be consistent across all the devices. A simple google search provided me many javascript plugins and some of them were pretty good. Select2 and Choosen seemed pretty promising. But they does not work well with mobile devices causing inconsistent design and a broken user experience. And its obvious that rendering extra html to simulate a control in mobiles is not a good idea also when the default available select control is pretty good. So i tried to figure out a way to trigger the default select in mobile devices while maintaining the appearance of control by html and css, see stackoverflow problem.

SumoSelect – A jQuery select plugin which can be used on almost any device

A light jQuery plugin written by Hemant Negi solves the above problem. It enhances an HTML Select Box into a Single/Multiple option dropdown list. Which can be fully customizable using simple css and maintain its appearance through all kind of devices. The best part is that it looks visually similar in mobiles but when you tap it on a mobile, It opens the default select menu (control) of the device. If it fails to recognize the device then it will open the dropdown list customized for low resolution which is somewhat similar to select list of Android devices.

SumoSelect is hosted on GitHub and the required documentation is also available there.

Using Sumoselect is pretty easy, Simply create a select element with all the options in it and add a class say “selectbox”.
Then you can initialize the control simply like.

Examples:

SumoSelect single select
SumoSelect Multiple select

With Select all options check and “OK/Cancel” Buttons.

Sumoselect select all

Force custom rendering in low res devices. This will be done automatically by plugin on low res devices if it is unable to identify the device.

SumoSelect on a low res device

 

sumoselect github repository
sumoselect Documentation 

Please feel free to comment and share your thoughts.

 

You Might Also Like

  • geekunlimited

    An amazing multiselect plugin. Really neat, easy to use and great documentation. Keep up the good work.

  • shakun

    No doubt its amazing but documentation is incomplete like get value from multi select is missing.

    function showselected()

    {

    var json = $(‘.testSelAll’).children(‘:selected’)

    $(json).each(function() {

    console.log( index + “: ” + $( this ).text() );

    });

    }

    • https://sqeets.com/ Hemant Negi

      Actually it was not necessarily required, as SumoSelect keeps on updating the underlying original select element. You can access the selected value directly from the select element.

      $(‘.select1 option:selected’).each(function(){
      console.log(this.value)
      })

  • Vikas Nainwal

    Hi, amazing multiselect plugin. But i’m having problems in applying it to the dynamically added select box. Could you please help,me?
    Thanks
    Vikas

  • naveen bisht

    Hey Himanshu

    i have problem i have values and i have to show selected in multdropdown, please give me code how is it possible.

  • naveen bisht

    Hey HIMANSHU
    I HAVE values but sumo select show selected based on index then how can i show selected values in multidrop down if i have values not index, or give me method so that i can find the index of selected values

    my email is bmkjnaveen@gmail.com please reply me on same.