---
title: "JQuery Select Setting values Example | Mobiscroll"
component: "Select"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/select/setting-values-defaults"
---

# Setting values - jQuery Select demo

JQuery Select scroller demo with examples for programmatically setting values and defaults for single/multiple select. For jQuery or jQuery Mobile.

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

## Description

Values can change in a couple of different ways: through defaults, interacting with the UI or programmatically. The select defaults to `null` (nothing is selected), which can be easily overridden with the [`defaultSelection`](https://mobiscroll.com/docs/jquery/select/api#opt-defaultSelection) option. The values are set by interacting with the component and making a selection or it can be done programmatically. Use the [`buttons`](https://mobiscroll.com/docs/jquery/select/api#opt-buttons) option for showing/hiding `set`, `cancel` or add custom buttons.

## What this demo shows

- Three groups of Select examples demonstrate how to initialize, change, and confirm selected values.
- **Controlling the default value** The first example starts with no selected value. The second uses the `defaultSelection` option to highlight an initial value when the picker opens; the user must confirm it before it becomes the selected value.
- **Setting values at runtime** An inline Select displays the picker directly on the page without an input. The Boston and London buttons above it use the `setVal` method to change the value programmatically, while the value can still be changed through the Select UI.
- **Setting values with buttons** The first example adds a custom button between the Cancel and Set buttons in the picker header. The second shows only a Cancel button in the footer and applies a value automatically when the user selects it, closing the dialog without requiring a separate Set action.
- **Select inputs** Focusing or clicking an input opens its picker below the input. Clicking outside the picker closes it.
- **Picker content** Input-based examples display a predefined list of options in a dropdown-style popup, while the inline example displays the options directly on the page.
- **Hover state** Hovering over an option highlights it.
- **Selection** Selecting an option marks it with a checkmark to indicate the current value.
- **Input value** In the input-based examples, confirming a selection updates the associated input with that value.

## Best for

- **Optional form fields** Start with no selected value when users should make an explicit choice.
- **Suggested defaults** Present a preselected option while requiring users to confirm it before applying the value.
- **External controls** Update a Select programmatically from preset buttons or other controls outside the component.
- **Inline selection** Keep a small set of options visible on the page when opening a separate popup would interrupt the workflow.
- **Explicit confirmation** Use Cancel and Set actions when users should review a choice before applying it.
- **Immediate selection** Remove the Set action when choosing an option should apply the value and close the dialog immediately.
- **Custom picker actions** Add a custom button when the selection flow needs a dedicated shortcut alongside the standard actions.

## Tutorial

### Controlling the default value

The select has no selected value by default. You can however manually set a default value through the [`defaultSelection`](https://mobiscroll.com/docs/jquery/select/api#opt-defaultSelection) option. This value will show as selected when opening the control, but it needs to be submitted to be accepted as a selected value.

```html
<label>
    Default
    <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>
</select>
```

```js
$('#my-select').mobiscroll().select({
    inputElement: document.getElementById('my-input')
});
```

```html
<label>
    Custom default
    <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>
</select>
```

```js
$('#my-select').mobiscroll().select({
    inputElement: document.getElementById('my-input'),
    defaultSelection: 'ber'
});
```

### Setting values runtime

While the selected value can be changed by interacting with the select, you can use the [`setVal`](https://mobiscroll.com/docs/jquery/select/api#method-setVal) method to change it programmatically.

```html
<button mbsc-button id="set-boston">Boston</button>
<button mbsc-button id="set-london">London</button>
```

```js
$('#set-boston').click(function () {
    $('#my-select').mobiscroll('bos');
    return false;
});

$('#set-london').click(function () {
    $('#my-select').mobiscroll('lon');
    return false;
});
```

### Setting values with buttons

The button API provides shortcuts to value selection and confirmation. Add a custom button and/or remove the 'Set' button to activate auto-set, which automatically closes the dialog if a value is selected.

```html
<label>
    Custom
    <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>
</select>
```

```js
$('#my-select').mobiscroll().select({
    inputElement: document.getElementById('my-input'),
    buttons: [{
            text: 'Custom',
            handler: function () {
                instance.setTempVal('chi');
            }
        }, 'set', 'cancel'
    ]
});
```

```html
<label>
    Auto set
    <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>
</select>
```

```js
$('#my-select').mobiscroll().select({
    inputElement: document.getElementById('my-input'),
    buttons: ['cancel']
});
```

## 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
- [`data`](https://mobiscroll.com/docs/jquery/select/api#opt-data) - option
- [`inputElement`](https://mobiscroll.com/docs/jquery/select/api#opt-inputElement) - option
- [`defaultSelection`](https://mobiscroll.com/docs/jquery/select/api#opt-defaultSelection) - option
- [`display`](https://mobiscroll.com/docs/jquery/select/api#opt-display) - option
- [`setVal`](https://mobiscroll.com/docs/jquery/select/api#method-setVal) - method
- [`buttons`](https://mobiscroll.com/docs/jquery/select/api#opt-buttons) - option
- [`setTempVal`](https://mobiscroll.com/docs/jquery/select/api#method-setTempVal) - method

## Code

### JS

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

$(function () {
  var cities = [
    {
      value: 'at;',
      text: 'Atlanta',
    },
    {
      value: 'ber',
      text: 'Berlin',
    },
    {
      value: 'bos',
      text: 'Boston',
    },
    {
      value: 'chi',
      text: 'Chicago',
    },
    {
      value: 'lon',
      text: 'London',
    },
  ];

  $('#demo-setting-values')
    .mobiscroll()
    .select({
      data: cities,
      inputElement: document.getElementById('setting-values-input'),
    });

  $('#demo-setting-values-default')
    .mobiscroll()
    .select({
      data: cities,
      inputElement: document.getElementById('setting-values-default-input'),
      defaultSelection: 'ber',
    });

  var customInst = $('#demo-setting-values-inline')
    .mobiscroll()
    .select({
      display: 'inline',
      data: cities,
    })
    .mobiscroll('getInst');

  $('#demo-setting-values-boston').click(function () {
    customInst.setVal('bos');
    return false;
  });

  $('#demo-setting-values-london').click(function () {
    customInst.setVal('lon');
    return false;
  });

  var buttonsInst = $('#demo-setting-values-custom')
    .mobiscroll()
    .select({
      data: cities,
      buttons: [
        {
          text: 'Custom',
          handler: function () {
            buttonsInst.setTempVal('chi');
          },
        },
        'set',
        'cancel',
      ],
    })
    .mobiscroll('getInst');

  $('#demo-setting-values-auto')
    .mobiscroll()
    .select({
      data: cities,
      buttons: ['cancel'],
    });
});
```

### HTML

```html
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Controlling the default value</div>
    <label>
        Default
        <input mbsc-input id="demo-setting-values" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" />
    </label>
    <label>
        Custom default
        <input mbsc-input id="demo-setting-values-default" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" />
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Setting a custom value</div>
    <div class="mbsc-button-group-block">
        <button mbsc-button id="demo-setting-values-boston">Boston</button>
        <button mbsc-button id="demo-setting-values-london">London</button>
    </div>
    <select id="demo-setting-values-inline">
        <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-form-group">
    <div class="mbsc-form-group-title">Buttons API</div>
    <label>
        Custom
        <input mbsc-input id="demo-setting-values-custom" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" />
    </label>
    <label>
        Auto set
        <input mbsc-input id="demo-setting-values-auto" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" />
    </label>
</div>
```

## Implementation notes

- `data` is an array of `{ text, value }` objects (e.g. `{ text: 'Atlanta', value: 'atl' }`) that defines the option list; it is the same shape whether the select is input-based or `display: 'inline'`.
- With no `defaultSelection` set, the select's value starts as `null`/unselected and the input shows the `placeholder` text.
- `defaultSelection` takes a `value` from `data` (e.g. `'ber'`) and pre-highlights that option when the picker opens; it does not set the committed value until the user confirms it (via the `set`/default confirm action).
- `display: 'inline'` renders the option list directly on the page instead of behind an input-triggered popup; it is combined with a `height` (e.g. `300`) to make the list scrollable within a fixed area.
- The `.setVal(value)` instance method sets the selected value programmatically at runtime, independent of `defaultSelection` - the demo calls it from external button click handlers (e.g. `.setVal('bos')`, `.setVal('lon')`).
- The `.setTempVal(value)` instance method stages a value into the (not-yet-confirmed) temporary selection without committing it - used from a custom `buttons` handler so the value still requires the `set`/confirm action (or auto-set) to apply.
- `buttons` is an array mixing predefined action strings (`'set'`, `'cancel'`) and custom button objects `{ text, handler }`; a custom entry is inserted between the predefined ones to add a dedicated action (e.g. `{ text: 'Custom', handler: () => instance.setTempVal('chi') }`).
- Omitting `'set'` from `buttons` (e.g. `buttons: ['cancel']`) switches the picker to auto-set behavior: selecting an option applies the value and closes the popup immediately, without a separate confirm step.
- Per framework, programmatic value control differs: JS/jQuery call `.setVal(value)` / `.setTempVal(value)` on the instance (JS: captured directly from the return value of `mobiscroll.select(...)`; jQuery: obtained via `.mobiscroll('getInst')`); React drives value via a `value` prop bound to component state (`useState`) updated from button `onClick` handlers, and reads/sets a `ref` (`selectRef.current!.setTempVal(...)`) for the buttons-API case; Vue binds `v-model` to a `ref()` for the runtime-value case, and accesses `customRef.value.instance.setTempVal(...)` for the buttons-API case; Angular binds `[(ngModel)]` to a component property for the runtime-value case, and calls `.setTempVal(...)` through a `@ViewChild` reference to the `<mbsc-select>` for the buttons-API case.

## 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: [Multi level hierarchy](https://demo.mobiscroll.com/jquery/select/linked-hierarchical-pickers.md) - JQuery hierarchical select example. Dynamically populate linked lists based on previous selection.