---
title: "Javascript Select Templating Example | Mobiscroll"
component: "Select"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/select/item-templating"
---
# Templating - JavaScript Select demo
Javascript select component & dropdown with templating capability. Render custom content for each item, like image & text. Plain JavaScript API.
- [Live demo](https://demo.mobiscroll.com/javascript/select/item-templating)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/pickers/select/item-templating)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/select/item-templating.md), [Angular](https://demo.mobiscroll.com/angular/select/item-templating.md), [React](https://demo.mobiscroll.com/react/select/item-templating.md), [Vue](https://demo.mobiscroll.com/vue/select/item-templating.md)
## Description
By default the select takes the `item.text` and `item.value` of the [`data` array](https://mobiscroll.com/docs/javascript/select/api#opt-data) items and populates the select. Besides the basic text/value interpretation you can write custom render functions for any custom markup printed as a scrollable list.
With the help of the [`renderItem` option](https://mobiscroll.com/docs/javascript/select/api#renderer-renderItem) you can write a function that returns the custom item markup. Any `data` field can be used for the template. You'll also want to make sure that the [`itemHeight`](https://mobiscroll.com/docs/javascript/select/api#opt-itemHeight) is set accordingly.
## What this demo shows
- Shows a single-value select with custom item templating.
- **Select input** Focusing or clicking the input opens the picker below it.
- **Popup behavior** Clicking outside the picker closes it.
- **Picker content** Each option displays album artwork, the album title, release year, and artist instead of text-only content.
- **Scrolling** The dropdown supports scrolling through the full list of options.
- **Hover state** Hovering over an option highlights it.
- **Selection** Selecting an option marks it with a checkmark to indicate the current value.
- **Input value** Selecting an option updates the associated input with that value.
## Best for
- **Media catalogs** Show cover artwork alongside titles, creators, release dates, or other metadata.
- **Product selectors** Pair product thumbnails with names, variants, prices, or availability details.
- **People pickers** Display avatars with names, roles, teams, or other identifying information.
- **Location selectors** Combine place names with flags, icons, addresses, or time zone details.
- **Status and category selectors** Add icons, color indicators, or supporting descriptions to make options easier to distinguish.
## 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
- [`display`](https://mobiscroll.com/docs/javascript/select/api#opt-display) - option
- [`itemHeight`](https://mobiscroll.com/docs/javascript/select/api#opt-itemHeight) - option
- [`touchUi`](https://mobiscroll.com/docs/javascript/select/api#opt-touchUi) - option
- [`data`](https://mobiscroll.com/docs/javascript/select/api#opt-data) - option
- [`renderItem`](https://mobiscroll.com/docs/javascript/select/api#renderer-renderItem) - renderer
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
mobiscroll.select('#demo-item-templating', {
display: 'anchored',
itemHeight: 64,
touchUi: true,
data: [
{
text: 'Mercury – Act 1',
year: '2021',
artist: 'Imagine Dragons',
value: '56243',
img: 'Mercury_Act_1',
},
{
text: 'Divide',
year: '2017',
artist: 'Ed Sheeran',
value: '18659',
img: 'Divide',
},
{
text: 'Evolution',
year: '2018',
artist: 'Disturbed',
value: '88459',
img: 'Evolution',
},
{
text: 'Future Nostalgia',
year: '2020',
artist: 'Dua Lipa',
value: '65422',
img: 'Future_Nostalgia',
},
{
text: 'Blue Banisters',
year: '2021',
artist: 'Lana Del Rey',
value: '67111',
img: 'Blue_Banisters',
},
{
text: 'Human',
year: '2021',
artist: 'OneRepublic',
value: '60589',
img: 'Human',
},
{
text: 'Kamikaze',
year: '2018',
artist: 'Eminem',
value: '42122',
img: 'Kamikaze',
},
{
text: 'Simulation Theory',
year: '2018',
artist: 'Muse',
value: '80040',
img: 'Simulation_Theory',
},
{
text: 'The Nothing',
year: '2019',
artist: 'Korn',
value: '46611',
img: 'Nothing',
},
],
renderItem: function (item) {
var data = item.data;
return (
'
'
);
},
});
```
### HTML
```html
```
### CSS
```css
.md-item-template {
padding: 10px 10px 10px 54px;
position: relative;
text-align: left;
line-height: normal;
}
.md-item-template-img {
position: absolute;
top: 50%;
left: 0;
width: 44px;
height: 44px;
margin-top: -22px;
border-radius: 4px;
}
.md-item-template-title {
font-weight: 600;
font-size: 15px;
line-height: 24px;
}
.md-item-template-artist {
font-size: 14px;
opacity: 0.8;
line-height: 20px;
}
.mbsc-scroller-wheel-item-2d .md-item-template {
transform: scale(1.05);
}
```
## Implementation notes
- By default the select renders each `data` item using only its `text`/`value` fields; any additional field on a `data` item (here `year`, `artist`, `img`) is ignored unless a custom item template is supplied.
- `data` items in this demo carry `text`, `value`, plus custom `year`, `artist`, and `img` fields - all of which the custom template reads off `item.data`.
- Custom templating is the mechanism, and its name and shape differ per framework:
- **React**: a `renderItem` prop takes a function `(item: MbscSelectItemData) => JSX.Element`; the function reads `item.data.text`/`.year`/`.artist`/`.img` and returns markup built from those fields (e.g. an `` sourced from `'https://img.mobiscroll.com/demos/' + data.img + '.png'`).
- **Angular**: an `[itemTemplate]="itemTemp"` input points at a named ``, with `item.data.*` interpolated directly in the template (`{{item.data.text}}`, `[src]="'...' + item.data.img + '.png'"`).
- **Vue**: the `#item` named slot on `` receives `item` as the slot prop, with `item.data.*` used inside `{{ }}` interpolations and `:src` bindings.
- **JS/jQuery**: a `renderItem` function option (inside `.select({ ... })`) takes `(item)` and returns an HTML string built via concatenation of `item.data.*` fields.
- `itemHeight` (here `64`) must be set to the actual pixel height the custom row renders at - this component does not auto-measure custom template content, so a mismatch causes clipped or overlapping rows during scrolling.
- The album artwork itself is not a select feature - it's a plain `` inside the custom template, sourced from a fixed `https://img.mobiscroll.com/demos/.png` naming convention.
- `display="anchored"` opens the picker as a dropdown anchored to the input; `inputStyle`/`labelStyle`/`placeholder` are cosmetic input-decoration options independent of templating.
## 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: [Country Dropdown](https://demo.mobiscroll.com/javascript/select/country-picker.md) - Javascript Country picker scroller select for mobile/tablet. Alphabetical ordering, jump to value and filtering is supported.
' +
'