group

by secretgspot

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.css">
<script src="http://m.xblix.ca/sources/mobiscroll.core-2.1.js"></script>
<script src="http://m.xblix.ca/sources/mobiscroll.select-2.1.js"></script>
 <select name="Names" id="select" style="display:none">
    <optgroup label="A">
        <option value="0">A1</option>
        <option value="1">A2</option>
        <option value="2">A3</option>
        <option value="4">A4</option>
    </optgroup>
    <optgroup label="B">
        <option value="5">B1</option>
        <option value="6">B2</option>
        <option value="7">B3</option>
        <option value="8">B4</option>
    </optgroup>
    <optgroup label="C">
        <option value="9">C1</option>
        <option value="10">C2</option>
        <option value="11">C3</option>
        <option value="12">C4</option>
      
    </optgroup>
       <optgroup label="D">
        <option value="13">D1</option>
        <option value="14">D2</option>
        <option value="15">D3</option>
        <option value="16">D4</option>
      
    </optgroup>
   
</select>

CSS

/* Datewheel overlay */
.dw {
    min-width:170px;
    position: absolute;
    top: 5%;
    left: 0;
    z-index: 1001;
    color: #000;
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
    text-shadow: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.dwi {
    position: static;
    margin: 5px;
    display: inline-block;
}
.dwwr {
    zoom: 1;
    padding: 0 10px;
    text-align:center;
}
/* Datewheel overlay background */
.dwo {
    width: 100%;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: .7;
    filter:Alpha(Opacity=70);
}
/* Bubble positionings */
.dw-bubble-bottom
{
    margin-top:18px;
}
.dw-bubble-top
{
    margin-top:-18px;
}
.dw-bubble .dw-arrw
{
    position:absolute;
    left:0;
    width:100%;
}
.dw-bubble-top .dw-arrw
{
    bottom:-36px;
}
.dw-bubble-bottom .dw-arrw
{
    top:-36px;
}
.dw-bubble .dw-arrw-i
{
    margin:0 30px;
    position:relative;
    height:36px;
}
.dw-bubble .dw-arr
{
    display:block;
}
.dw-arr
{
    display:none;
    position:absolute;
    left:0;
    width:0;
    height:0;
    border-width:18px 18px;
    border-style:solid;
    margin-left:-18px;
}
.dw-bubble-bottom .dw-arr
{
    top:0;
    border-color:transparent transparent #fff transparent;
}
.dw-bubble-top .dw-arr
{
    bottom:0;
    border-color:#fff transparent transparent transparent;
}
/* Datewheel wheel container wrapper */
.dwc {
    float: none;
    margin: 0 2px 5px 2px;
    padding-top: 30px;
    display:inline-block;
}
.dwcc {
    clear: both;
}
/* Datewheel label */
.dwl {
    text-align: center;
    line-height: 30px;
    height: 30px;
    white-space: nowrap;
    position: absolute;
    top: -30px;
    width: 100%;
}
/* Datewheel value */
.dwv {
    padding: 10px 0;
    border-bottom: 1px solid #000;
}
/* Datewheel wheel container */
.dwrc {
 ...

JavaScript

$(function(){
    $('#select').scroller({
        preset: 'select',
        theme: 'default',
        display: 'inline',
        mode: 'mixed',
        width: 50,
        inputClass: 'i-txt',
        group: true
    });
});