---
title: "Javascript select multiple dropdown examples | Mobiscroll"
component: "Select"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/select/multiple-select"
---

# Multiple select - JavaScript Select demo

Javascript multiple select & multi-select for mobile and desktop. Use it for product or category filtering with check-mark selection. Plain JS api for usage everywhere.

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

## Description

Use it on mobile and desktop for listing different options with multiple select. It can be tied to an input, native select or rendered inline. Turn it on by setting [`selectMultiple`](https://mobiscroll.com/docs/javascript/select/api#opt-selectMultiple) to `true`.

As an alternative to the [checkbox list](https://demo.mobiscroll.com/javascript/forms/checkbox) it works great for category filtering... eg. e-commerce solutions.

**Looking for single value selection?** [Check out the previous example →](https://demo.mobiscroll.com/javascript/select/single-select)

## What this demo shows

- Shows a select that lets users choose multiple options from a predefined list.
- **Opening the picker** Focusing or clicking the input opens the picker below it.
- **Closing the picker** Clicking outside the picker closes it.
- **Picker content** Show a predefined list of options in a dropdown-style popup.
- **Hover state** Hovering over an option highlights it in the picker.
- **Selection** Selecting one or more options adds a checkmark to indicate that it is selected.
- **Scrolling** The picker supports scrolling through the full list of options.
- **Selected values** Selected options appear as chips inside the input.
- **Removing values** Each selected value can be removed individually using the close icon on its chip.

## Best for

- **Team member selection** Choose multiple people from a team directory using avatars and names for quick identification.
- **Participant assignment** Add several attendees, collaborators, or assignees to an item.
- **Contact selection** Select multiple recipients from a contact list where profile images help distinguish people with similar names.

## Tutorial

```html
<label>
    Multi-select
    <input mbsc-input id="my-input" data-dropdown="true" data-tags="true" />
</label>
<select id="multiple-select" multiple>
    <option value="1">Books</option>
    <option value="2">Movies, Music & Games</option>
    <option value="3">Electronics & Computers</option>
    <option value="4">Home, Garden & Tools</option>
    <option value="5">Health & Beauty</option>
    <option value="6">Toys, Kids & Baby</option>
    <option value="7">Clothing & Jewelry</option>
    <option value="8">Sports & Outdoors</option>
</select>
```

```js
mobiscroll.select('#multiple-select', {
    inputElement: document.getElementById('my-input'),
    touchUi: false
});
```

## API used in this demo

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

## Code

### JS

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

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

### HTML

```html
<label>
    Multi-select
    <input mbsc-input id="demo-multiple-select-input" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" data-tags="true" />
</label>
<select id="demo-multiple-select" multiple>
    <option value="1">Books</option>
    <option value="2">Movies, Music & Games</option>
    <option value="3">Electronics & Computers</option>
    <option value="4">Home, Garden & Tools</option>
    <option value="5">Health & Beauty</option>
    <option value="6">Toys, Kids & Baby</option>
    <option value="7">Clothing & Jewelry</option>
    <option value="8">Sports & Outdoors</option>
</select>
```

## Implementation notes

- `selectMultiple` (boolean) is the option that turns the picker from single-value into multi-value selection; it is the only option that differs between this demo and a single-select instance built from the same `data`.
- `data` is an array of `{ value, text }` objects (e.g. `{ value: 1, text: 'Books' }`); with `selectMultiple: true` the resolved value becomes an array of the selected `value`s instead of a single scalar.
- Framework binding is a plain prop/attribute/option in every framework, with no imperative wiring needed for the multi-select behavior itself: React `selectMultiple={true}` on `<Select>`, Vue `:selectMultiple="true"` on `<MbscSelect>`, Angular `[selectMultiple]="true"` on `<mbsc-select>`, JS/jQuery `selectMultiple: true` in the options object passed to `mobiscroll.select(el, {...})` / `$(el).mobiscroll().select({...})`.
- Selected options are marked with a checkmark inside the popup list, and once confirmed each selected value renders as its own removable chip inside the bound input - this chip rendering is automatic once `selectMultiple` is on and the picker is bound to an input (`inputElement` in JS/jQuery, or the component's own rendered input in React/Vue/Angular), not a separately configured option.
- Removing a chip's value from the input (via its close icon) deselects that option in the picker; no separate event handler is required to keep the input and the picker's selection in sync - the bound input and the picker's checked state stay linked through the shared `data`/value binding.
- JS/jQuery can alternatively source `data` from a native multi-select element (`<select multiple>` with `<option>` children) instead of passing a `data` array - the demo's fullscreen markup uses this native-`<select>` form, while the framework code snippets use an explicit `data` array.

## 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-javascript.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 javascript
   ```

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 javascript --trial`.

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

## Related demos

- Previous: [Single select](https://demo.mobiscroll.com/javascript/select/single-select.md) - Javascript select & dropdown for mobile and desktop with single value selection.
- Next: [Group options](https://demo.mobiscroll.com/javascript/select/group-options.md) - Javascript Select with group options and headers rendered as a hierarchy. With native look & feel, improved UX and source code.