---
title: "Javascript Select Mobile & Desktop usage Example | Mobiscroll"
component: "Select"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/select/mobile-desktop-usage"
---

# Mobile & Desktop usage - JavaScript Select demo

Javascript Select for desktop and mobile. Use a dropdown layout for desktop and native look on mobile. Plain JS api for usage everywhere.

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

## Description

Use the select/combobox for both mobile and desktop or set it up responsively.

The main difference between the two rendering modes is how the picker is laid out. Set the `touchUi` option to `false` and the component shows up suitable for larger screens and pointer interaction while setting it to `true` renders it suitable for touch screens.

Use it on an existing form field, custom input, native select or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.

**Handle different screen sizes by setting it up responsively** [Check out the responsive demo →](https://demo.mobiscroll.com/javascript/select/responsive)

## What this demo shows

- Shows four single-value select examples in touch and desktop layouts.
- **Select inputs** The first example opens the picker when the user focuses or clicks a standard input. The second opens it only from the `Show picker` button next to the input. The third uses a Mobiscroll input as the trigger.
- **Input behavior** In the three input-based examples, the picker opens below the input and closes when the user clicks outside it.
- **Inline select** The fourth example embeds the picker directly in the page without an input by using inline display mode.
- **Picker content** The input-based examples show a predefined list of options in a dropdown-style popup. Inline mode displays the options directly on the page.
- **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.
- **Input value** In the input-based examples, selecting an option updates the associated 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.
- **Editable text fields** Keep an input editable while opening the predefined options from a separate button.
- **Always-visible choices** Use inline mode when the option list should remain visible without opening a popup.

## Tutorial

```html
<input id="my-input" />
<select id="native-select">
    <option value="atl">Atlanta</option>
    <option value="ber">Berlin</option>
    <option value="chi">Chicago</option>
    <option value="lon">London</option>
</select>
```

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

```html
<input id="my-input" />
<select id="button-select">
    <option value="atl">Atlanta</option>
    <option value="ber">Berlin</option>
    <option value="chi">Chicago</option>
    <option value="lon">London</option>
</select>
<button id="show-picker">Show picker</button>
```

```js
var picker = mobiscroll.select('#button-select', {
    inputElement: document.getElementById('my-input'),
    touchUi: false,
    showOnClick: false,
    showOnFocus: false
});
document
    .getElementById('show-picker')
    .addEventListener('click', function () {
        picker.open();
        return false;
    });
```

```html
<label><input mbsc-input id="my-input" /></label>
<select id="mobi-select">
    <option value="atl">Atlanta</option>
    <option value="ber">Berlin</option>
    <option value="chi">Chicago</option>
    <option value="lon">London</option>
</select>
```

```js
mobiscroll.select('#mobi-picker', {
    touchUi: false
});
```

```html
<select id="inline-picker">
    <option value="atl">Atlanta</option>
    <option value="ber">Berlin</option>
    <option value="chi">Chicago</option>
    <option value="lon">London</option>
</select>
```

```js
mobiscroll.select('#inline-picker', {
    display: 'inline',
    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
- [`showOnClick`](https://mobiscroll.com/docs/javascript/select/api#opt-showOnClick) - option
- [`showOnFocus`](https://mobiscroll.com/docs/javascript/select/api#opt-showOnFocus) - option
- [`setVal`](https://mobiscroll.com/docs/javascript/select/api#method-setVal) - method
- [`display`](https://mobiscroll.com/docs/javascript/select/api#opt-display) - option
- [`open`](https://mobiscroll.com/docs/javascript/select/api#method-open) - method

## Code

### JS

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

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

var instance = mobiscroll.select('#demo-mobile-select-button', {
  inputElement: document.getElementById('demo-mobile-select-button-input'),
  showOnClick: false,
  showOnFocus: false,
});

instance.setVal('atl', true);

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

mobiscroll.select('#demo-mobile-select-inline', {
  display: 'inline',
});

document.getElementById('show-mobile-date-picker').addEventListener('click', function () {
  instance.open();
  return false;
});
```

### HTML

```html
<div class="mbsc-grid">
    <div class="mbsc-form-group">
        <div class="mbsc-row">
            <div class="mbsc-col-12">
                <div class="mbsc-txt-muted md-mobile-picker-header">Use the picker with any inputs & show on focus/click</div>
                <input id="demo-mobile-select-native-input" placeholder="Please select..." class="md-mobile-picker-input" />
                <select id="demo-mobile-select-native">
                    <option value="atl">Atlanta</option>
                    <option value="ber">Berlin</option>
                    <option value="chi">Chicago</option>
                    <option value="lon">London</option>
                </select>
            </div>
        </div>
    </div>
    <div class="mbsc-form-group">
        <div class="mbsc-row">
            <div class="mbsc-col-12 mbsc-txt-muted md-mobile-picker-header">Disable <code>onClick/onFocus</code> and only show on button</div>
            <div class="mbsc-col-8">
                <input id="demo-mobile-select-button-input" placeholder="Please select..." class="md-mobile-picker-input" />
                <select id="demo-mobile-select-button" class="md-mobile-picker-input">
                    <option value="atl">Atlanta</option>
                    <option value="ber">Berlin</option>
                    <option value="chi">Chicago</option>
                    <option value="lon">London</option>
                </select>
            </div>
            <div class="mbsc-col-4 mbsc-col-no-padding">
                <button mbsc-button data-variant="outline" data-color="primary" id="show-mobile-date-picker" class="md-mobile-picker-button">Show picker</button>
            </div>
        </div>
    </div>
    <div class="mbsc-form-group">
        <div class="mbsc-row">
            <div class="mbsc-col-12">
                <div class="mbsc-txt-muted md-mobile-picker-header">Use the picker with a Mobiscroll input</div>
                <label class="md-mobile-picker-box-label">
                    <input mbsc-input id="demo-mobile-select-mobiscroll-input" placeholder="Please select..." data-dropdown="true" data-input-style="box" />
                </label>
                <select id="demo-mobile-select-mobiscroll">
                    <option value="atl">Atlanta</option>
                    <option value="ber">Berlin</option>
                    <option value="chi">Chicago</option>
                    <option value="lon">London</option>
                </select>
            </div>
        </div>
    </div>
    <div class="mbsc-txt-muted md-mobile-picker-header">Use the picker inline in any page</div>
</div>
<div class="md-mobile-picker-inline">
    <select id="demo-mobile-select-inline">
        <option value="atl">Atlanta</option>
        <option value="ber">Berlin</option>
        <option value="chi">Chicago</option>
        <option value="lon">London</option>
    </select>
</div>
```

### CSS

```css
.md-mobile-picker-header {
    font-size: 14px;
}

.md-mobile-picker-input {
    color: initial;
    width: 100%;
    padding: 10px;
    margin: 6px 0 12px 0;
    border: 1px solid #ccc;
    border-radius: 0;
    font-family: arial, verdana, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.md-mobile-picker-button.mbsc-button {
    font-size: 13px;
    padding: 0 15px;
    line-height: 36px;
    float: right;
    margin: 6px 0;
    width: 100%;
}

.mbsc-col-no-padding {
    padding-left: 0;
}

.md-mobile-picker-box-label.mbsc-textfield-wrapper-box,
.md-mobile-picker-box-label .mbsc-textfield-wrapper-box,
.md-mobile-picker-inline {
    margin: 6px 0 12px 0;
}
```

## Implementation notes

- `touchUi` (boolean) is the option that switches all four examples between touch-optimized mobile layout (`true`) and pointer-optimized desktop layout (`false`); it does not change which display mode is used, only how the picker is rendered/positioned within it.
- `data` is an array of `{ text, value }` objects (e.g. `{ text: 'Atlanta', value: 'atl' }`); JS/jQuery and Angular instead source the same options from a native `<select>`'s `<option value="...">Text</option>` children (Angular can alternatively use `<mbsc-select-option value="...">`).
- The first example binds the picker to a plain input: React/Vue pass `inputComponent="input"` on `<Select>`/`<MbscSelect>` so the component renders its own bound `<input>`; Angular passes `[inputElement]="myinput"` pointing at a template-referenced `<input #myinput>`; JS/jQuery pass `inputElement: document.getElementById('my-input')`. Focusing or clicking that input opens the picker by default.
- The second example disables the default open triggers with `showOnClick={false}` / `:showOnClick="false"` / `[showOnClick]="false"` / `showOnClick: false` and `showOnFocus` (same pattern) so the picker only opens from a separate `Show picker` button.
- Opening on the button click is declarative in React/Vue: a boolean state (`openPicker`/`isPickerOpen`) drives the `isOpen`/`:isOpen` prop, the button's click handler sets it `true`, and the `onClose`/`@close` handler resets it to `false`. It is imperative in Angular and JS/jQuery: Angular keeps a `@ViewChild('picker', { static: false })` reference to the select and calls `pickerInst.open()`; JS/jQuery call `.mobiscroll('getInst')` (jQuery) or capture the return value of `mobiscroll.select(...)` (JS) once to get the instance, then call `.open()` from the button's click handler.
- The third example binds the picker to a Mobiscroll-styled input instead of a plain one: the trigger input carries the `mbsc-input` attribute/directive (JS/jQuery/Angular) so it renders with Mobiscroll's label/box styling; React/Vue use the same `data`/`touchUi` props without `inputComponent`, since `<Select>`/`<MbscSelect>` renders a Mobiscroll input by default.
- The fourth example sets `display="inline"` (React/Vue prop, Angular attribute) or `display: 'inline'` (JS/jQuery option) to embed the option list directly on the page with no input and no modal.
- `.setVal(value, fireChange)` (JS/jQuery instance method) programmatically preselects a value on the picker instance after creation, e.g. `buttonSelect.setVal('atl', true)` on the button-triggered example; the second argument controls whether the picker's `onChange` handling fires for that programmatic update.

## 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: [Responsive behavior](https://demo.mobiscroll.com/javascript/select/responsive.md) - Responsive setup of the Javascript select. Change the rendering and positioning dynamically, based on screen size.