Group headers with single select
Javascript jQuery Angular React
html<label>
    Single select
    <input mbsc-input id="my-input" data-dropdown="true" />
</label>
<select id="single-group-select">
    <optgroup label="US">
        <option value="atl">Atlanta</option>
        <option value="bos">Boston</option>
    </optgroup>
    <optgroup label="UK">
        <option value="bat">Bath</option>
        <option value="bri">Bristol</option>
    </optgroup>
</select>
js$('#single-group-select').mobiscroll().select({
    inputElement: document.getElementById('my-input'),
    touchUi: 
});
Render a group wheel
Javascript jQuery Angular React
html<label>
    Single select
    <input mbsc-input id="my-input" data-dropdown="true" />
</label>
<select id="single-group-select">
    <optgroup label="US">
        <option value="atl">Atlanta</option>
        <option value="bos">Boston</option>
    </optgroup>
    <optgroup label="UK">
        <option value="bat">Bath</option>
        <option value="bri">Bristol</option>
    </optgroup>
    <optgroup label="DE">
        <option value="ber">Berlin</option>
        <option value="dus">Duisburg</option>
        <option value="col">Cologne</option>
    </optgroup>
    <optgroup label="FR">
        <option value="par">Paris</option>
        <option value="lyo">Lyon</option>
    </optgroup>
</select>
js$('#single-group-select').mobiscroll().select({
    showGroupWheel: true,
    inputElement: document.getElementById('my-input'),
    touchUi: 
});
Group headers with multiple select
Javascript jQuery Angular React
html<label>
    Multi-select
    <input mbsc-input id="my-input" data-dropdown="true" data-tags="true" />
</label>
<select id="multiple-group-select">
    <optgroup label="Electronics">
        <option value="1">Camera & Photo</option>
        <option value="2">Cell Phones & Accessories</option>
        <option value="3">GPS & Navigation</option>
    </optgroup>
    <optgroup label="Smart Home">
        <option value="4">Plugs and Outlets</option>
        <option value="5">Heating and Cooling</option>
        <option value="6">Detectors and Sensors</option>
    </optgroup>
</select>
js$('#multiple-group-select').mobiscroll().select({
    inputElement: document.getElementById('my-input'),
    touchUi: 
});