---
title: "JQuery Select Group options Example | Mobiscroll"
component: "Select"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/select/group-options"
---

# Group options - jQuery Select demo

JQuery Select with group options and headers rendered as a hierarchy. With native look & feel, improved UX and source code. For jQuery or jQuery Mobile.

- [Live demo](https://demo.mobiscroll.com/jquery/select/group-options)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/pickers/select/group-options)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/select/group-options.md), [Angular](https://demo.mobiscroll.com/angular/select/group-options.md), [React](https://demo.mobiscroll.com/react/select/group-options.md), [Vue](https://demo.mobiscroll.com/vue/select/group-options.md)

## Description

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.

## What this demo shows

- Three select examples demonstrate different ways to group options.
- **Select inputs** Each example opens the picker when the user focuses or clicks the input.
- **Input behavior** The picker opens below the input and closes when the user clicks outside it.
- **Group headers** The first example organizes the option list with group headers and allows a single selection.
- **Group wheel** The second example adds a group wheel to the left of the option list, retains group headers, and allows a single selection.
- **Multiple selection with group headers** The third example organizes the option list with group headers and allows multiple selections. Selected options appear as chips inside the input, and each selection can be removed using the close icon on its chip.
- **Hover state** Hovering over an option highlights it in the picker.
- **Selection** Selected options are marked with a checkmark to indicate the current value.
- **Scrolling** The picker supports scrolling through the full list of options.
- **Input value** Selecting an option updates the input with the selected value or values.

## Best for

- **Long option lists** Organizing many options into labeled groups so users can scan and find values more easily.
- **Location selection** Grouping countries, regions, cities, or offices by geographic area.
- **People and resources** Grouping employees, team members, rooms, or equipment by department, role, or resource type.
- **Catalog selection** Grouping products, services, or inventory items by category.
- **Multiple-value workflows** Allowing users to select and review several grouped values as removable chips.

## Tutorial

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

### Render a group wheel

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

### Group headers with multiple select

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

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/select/api#opt-themeVariant) - option
- [`inputElement`](https://mobiscroll.com/docs/jquery/select/api#opt-inputElement) - option
- [`showGroupWheel`](https://mobiscroll.com/docs/jquery/select/api#opt-showGroupWheel) - option
- [`selectMultiple`](https://mobiscroll.com/docs/jquery/select/api#opt-selectMultiple) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

$(function () {
  $('#demo-single-group-select')
    .mobiscroll()
    .select({
      inputElement: document.getElementById('demo-single-group-select-input'),
    });

  $('#demo-single-group-select-wheel')
    .mobiscroll()
    .select({
      showGroupWheel: true,
      inputElement: document.getElementById('demo-single-group-select-wheel-input'),
    });

  $('#demo-multiple-group-select')
    .mobiscroll()
    .select({
      inputElement: document.getElementById('demo-multiple-group-select-input'),
      selectMultiple: true,
    });
});
```

### HTML

```html
<label>
    Single select
    <input mbsc-input id="demo-single-group-select-input" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" />
</label>
<select id="demo-single-group-select">
    <optgroup label="US">
        <option value="1">Atlanta</option>
        <option value="2">Boston</option>
    </optgroup>
    <optgroup label="UK">
        <option value="3">Bath</option>
        <option value="4">Bristol</option>
    </optgroup>
</select>
<label>
    Group wheel
    <input mbsc-input id="demo-single-group-select-wheel-input" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" />
</label>
<select id="demo-single-group-select-wheel">
    <optgroup label="US">
        <option value="1">Atlanta</option>
        <option value="2">Boston</option>
    </optgroup>
    <optgroup label="UK">
        <option value="3">Bath</option>
        <option value="4">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>
<label>
    Multi-select
    <input mbsc-input id="demo-multiple-group-select-input" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" data-tags="true" />
</label>
<select id="demo-multiple-group-select" multiple>
    <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>
```

## Implementation notes

- Group headers come from a `group` field on each data item: `{ text: 'Atlanta', value: 'atl', group: 'US' }`. Items are grouped by that field's value and a non-selectable header row showing the group name is inserted above each cluster of matching items.
- Markup-based JS/jQuery selects (native `<select>`) get the same grouping from `<optgroup label="US">...</optgroup>` wrapping the relevant `<option>` elements - the `group` field on `data` items is the equivalent for React/Angular/Vue and for JS/jQuery when using the `data` option instead of markup.
- `showGroupWheel: true` adds a second, separate wheel to the left of the item list showing only the group names; selecting a group in that wheel scrolls/filters the item wheel to that group's options, while group headers remain in the item list itself.
- `selectMultiple: true` switches the picker to multi-select: selected items are marked with a checkmark in the list and rendered as removable chips inside the bound input, each with a close icon; grouping (headers and, if enabled, the group wheel) works the same way as in single-select mode.
- Per-framework binding for the grouped `data` array is the same as in data-sources: React `data={myData}` prop, Angular `[data]="myData"`, Vue `:data="myData"`, JS/jQuery `data: [...]` inside `.select({...})`; `showGroupWheel` and `selectMultiple` follow the same per-framework option/prop/binding convention (plain option in JS/jQuery, prop in React, `[showGroupWheel]`/`[selectMultiple]` in Angular, `:showGroupWheel`/`:selectMultiple` in Vue).

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-jquery.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config jquery
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config jquery --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation

## Related demos

- Previous: [Multiple select](https://demo.mobiscroll.com/jquery/select/multiple-select.md) - JQuery multiple select & multi-select for mobile and desktop. Use it for product or category filtering with check-mark selection.
- Next: [Filtering](https://demo.mobiscroll.com/jquery/select/filtering-values.md) - JQuery select with filtering. Type in the header of the dropdown and filter values locally or remotely.