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.