JQuery Select Group options Example

Enable group headers through the group property of the options or the optgroup of the native select.

Grouping works for both single and multiple select pickers.

Group headers with single select

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

Single select

Render a group wheel

Javascript jQuery Angular React Vue

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 wheel

Group headers with multiple select

Javascript jQuery Angular React Vue

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