---
title: "Javascript Select Single select Example | Mobiscroll"
component: "Select"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/select/single-select"
---

# Single select - JavaScript Select demo

Javascript select & dropdown for mobile and desktop with single value selection. Plain JavaScript API.

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

## Description

Single value selection is the default behavior of the picker. You can explicitly enable it by setting the [`selectMultiple`](https://mobiscroll.com/docs/javascript/select/api#opt-selectMultiple) to `false`.

You can dynamically switch between single and multiple select.

**Looking for multiple select?** [Check out the next example →](https://demo.mobiscroll.com/javascript/select/multiple-select)

## What this demo shows

- Shows a single-value select example.
- **Select inputs** This 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.
- **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 an option marks it 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 that value.

## Best for

- **Responsive forms** Use the touch or desktop layout to match the input method and available screen space.
- **Profile and account forms** Let users choose a single predefined value, such as a country, language, or notification preference.
- **Filters and settings** Provide a compact list for selecting one status, category, display mode, or configuration value.

## Tutorial

```html
<label>
    Single select
    <input mbsc-input id="my-input" data-dropdown="true" />
</label>
<select id="single-select">
    <option value="atl">Atlanta</option>
    <option value="ber">Berlin</option>
    <option value="bos">Boston</option>
    <option value="chi">Chicago</option>
    <option value="lon">London</option>
    <option value="la">Los Angeles</option>
    <option value="ny">New York</option>
    <option value="par">Paris</option>
    <option value="sf">San Francisco</option>
</select>
```

```js
mobiscroll.select('#single-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-single-select', {
  inputElement: document.getElementById('demo-single-select-input'),
});
```

### HTML

```html
<label>
   Single select
    <input mbsc-input id="demo-single-select-input" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" />
</label>
<select id="demo-single-select">
    <option value="atl">Atlanta</option>
    <option value="ber">Berlin</option>
    <option value="bos">Boston</option>
    <option value="chi">Chicago</option>
    <option value="lon">London</option>
    <option value="la">Los Angeles</option>
    <option value="ny">New York</option>
    <option value="par">Paris</option>
    <option value="sf">San Francisco</option>
</select>
```

## Implementation notes

- `selectMultiple` defaults to `false`, so a `Select` instance is single-value out of the box; it only needs to be set explicitly when switching a given instance between single- and multiple-select behavior at runtime.
- `data` is an array of `{ text, value }` objects (e.g. `{ text: 'Atlanta', value: 'atl' }`); when no `data` is passed, the select instead reads `<option value="...">Label</option>` entries from the native `<select>` element it's bound to.
- `inputElement` points the select at a separate `<input>` used as the display/trigger field - the popup opens on focus/click of that input, positioned below it, and closes on outside click; the selected option's text becomes the input's value and the selected option itself is marked with a checkmark in the list.
- `touchUi` (boolean) switches the picker's rendering between the touch-optimized scroller/dialog layout (`true`) and the compact desktop dropdown layout (`false`); the demo's responsive layout toggle drives this option to preview both.
- Per framework: JS/jQuery pass `touchUi`/`inputElement`/`data` inside `.select({ ... })` / `mobiscroll.select(el, { ... })`; React sets `touchUi`/`data` as props on `<Select>`; Angular binds `[touchUi]`/`[data]` on `<mbsc-select>`; Vue binds `:touchUi`/`:data` on `<MbscSelect>`.

## 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

- Next: [Multiple select](https://demo.mobiscroll.com/javascript/select/multiple-select.md) - Javascript multiple select & multi-select for mobile and desktop. Use it for product or category filtering with check-mark selection.