---
title: "Javascript Select Populating the picker Example | Mobiscroll"
component: "Select"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/select/data-sources"
---

# Populating the picker - JavaScript Select demo

Javascript select component with different ways of loading the data: native html select, data objects and remote json. Plain JavaScript API.

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

## Description

The select component takes care of rendering data in a scrollable and consumable way for the user. The date can be passed a couple of different ways:

- **Inline HTML**, embedded in the markup - This is good if you only have a couple of static options.
- With the **`data` option** - If you want to load model data this is the way to do it. This is the way to populate the select if you want to create a [custom item template](https://demo.mobiscroll.com/javascript/select/item-templating).
- **Remote data** - Load it through the `data` option from a remote api/data source.

## What this demo shows

- Three single-value select examples using different data population methods.
- **Inline HTML** Embeds the select and its options directly in the markup.
- **Data object** Passes model data to the `data` option, which also supports custom item templates.
- **Remote data** Passes data loaded from a remote API or data source to the `data` option.
- **Select inputs** Opens the picker when the user focuses or clicks the associated input.
- **Input behavior** Displays the picker below the input and closes it when the user clicks outside.
- **Picker content** Presents a predefined list of options in a dropdown-style popup.
- **Hover state** Highlights an option when the user hovers over it.
- **Selection** Marks the selected option with a checkmark to indicate the current value.
- **Input value** Updates the associated input with the selected value.

## Best for

- **Small static lists** Embed a few fixed options directly in the markup with inline HTML.
- **Model-driven options** Populate the select through the `data` option when values come from application data.
- **Custom item layouts** Use the `data` option when select items need custom templates.
- **Remote datasets** Load options from a remote API or data source and pass the results to the `data` option.

## Tutorial

### Inline HTML

The select and options are embedded in the markup.

```html
<label>
    HTML
    <input mbsc-input id="my-input" data-dropdown="true" />
</label>
<select id="my-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('#my-select', {
        inputElement: document.getElementById('my-input'),
        touchUi: false
    });
```

### Data object

Pass the items to the `data` option if you are loading from the model or in case of [item templating](https://demo.mobiscroll.com/javascript/select/item-templating).

```html
<label>
    Data object
    <input mbsc-input id="my-select" data-dropdown="true" />
</label>
```

```js
mobiscroll.select('#my-select', {
    touchUi: false,
    data: [
        { text: 'Atlanta', value: 'atl' },
        { text: 'Berlin', value: 'ber' },
        { text: 'Boston', value: 'bos' },
        { text: 'Chicago', value: 'chi' },
        { text: 'London', value: 'lon' },
        { text: 'Los Angeles', value: 'la' },
        { text: 'New York', value: 'ny' },
        { text: 'Paris', value: 'par' },
        { text: 'San Francisco', value: 'sf' }
    ]
});
```

### Remote data

The data loaded from a remote source needs to be passed to the `data` option as in the previous example.

```html
<label>
    Remote data
    <input mbsc-input id="my-select" data-dropdown="true" />
</label>
```

```js
var inst = mobiscroll.select('#my-select', {
    touchUi: false
});

mobiscroll.getJson('https://trial.mobiscroll.com/content/languages.json', function (resp) {
    inst.setOptions({ data: resp });
}, 'jsonp');
```

## 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
- [`data`](https://mobiscroll.com/docs/javascript/select/api#opt-data) - option
- [`setOptions`](https://mobiscroll.com/docs/javascript/select/api#method-setOptions) - method

## Code

### JS

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

mobiscroll.select('#demo-data-sources-html', {
  inputElement: document.getElementById('demo-data-sources-html-input'),
});

mobiscroll.select('#demo-data-sources-object', {
  data: [
    {
      text: 'Atlanta',
      value: 'atl',
    },
    {
      text: 'Berlin',
      value: 'ber',
    },
    {
      text: 'Boston',
      value: 'bos',
    },
    {
      text: 'Chicago',
      value: 'chi',
    },
    {
      text: 'London',
      value: 'lon',
    },
    {
      text: 'Los Angeles',
      value: 'la',
    },
    {
      text: 'New York',
      value: 'ny',
    },
    {
      text: 'Paris',
      value: 'par',
    },
    {
      text: 'San Francisco',
      value: 'sf',
    },
  ],
});

var inst = mobiscroll.select('#demo-data-sources-remote', {
  inputElement: document.getElementById('demo-data-sources-html-input'),
});

mobiscroll.getJson('https://trial.mobiscroll.com/content/languages.json', function (resp) {
  inst.setOptions({ data: resp });
});
```

### HTML

```html
<div class="mbsc-grid mbsc-form-grid">
    <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <label>
                HTML
                <input mbsc-input id="demo-data-sources-html-input" data-dropdown="true" data-input-style="box" data-label-style="stacked" placeholder="Please select..." />
            </label>
            <select id="demo-data-sources-html">
                <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>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <label>
                Data object
                <input mbsc-input id="demo-data-sources-object" data-dropdown="true" data-input-style="box" data-label-style="stacked" placeholder="Please select..." />
            </label>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <label>
                Remote data
                <input mbsc-input id="demo-data-sources-remote" data-dropdown="true" data-input-style="box" data-label-style="stacked" placeholder="Please select..."></select>
            </label>
        </div>
    </div>
</div>
```

## Implementation notes

- **Inline HTML** works only for JS/jQuery: a native `<select>` with `<option value="...">Text</option>` children is passed to `mobiscroll.select('#id', {...})` / `$('#id').mobiscroll().select({...})` as-is, with no `data` option needed. React, Angular, and Vue always populate options through the `data` option/prop - there is no inline-markup path for those frameworks.
- **Data object** populates the picker from an array of `{ text, value }` objects passed to `data` (JS/jQuery `data: [...]` in `.select({...})`; React `data={myData}` prop on `<Select>`; Angular `[data]="myData"` binding with `myData` defined on the component; Vue `:data="myData"` binding with `myData` defined in `<script setup>`).
- **Remote data** loads the same `{ text, value }` shape asynchronously and assigns it after the initial render/init rather than at construction time:
  - JS/jQuery: get the instance via `.mobiscroll('getInst')` (or the return value of `mobiscroll.select(...)`), fetch with `mobiscroll.getJson(url, callback, 'jsonp')` / `$.getJSON(url, callback, 'jsonp')`, then call `inst.setOptions({ data: resp })` in the callback.
  - React: fetch inside a `useEffect` and store the response in state (`useState([])`), then bind `data={remoteData}` - the picker re-renders once the state updates.
  - Angular: fetch in `ngOnInit` via `this.http.get(url).subscribe(...)`, assign the response to a component property, and bind `[data]="remoteData"`.
  - Vue: fetch in `onMounted` and assign the response to a `ref([])`, bound as `:data="remoteData"`.
- `inputElement` points the picker at a separate `<input>` element (rather than the `<select>`/component itself) so the popup opens when that input is focused/clicked and shows the selected value there.
- The example data uses string `value`s (e.g. `'atl'`, `'ber'`); `text` is the label shown in the option list and, once selected, in the bound input.

## 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: [Understanding display modes](https://demo.mobiscroll.com/javascript/select/mobile-desktop-display.md) - Javascript select/dropdown for mobile and desktop with top, bottom, popup, center, modal, anchored positioning.