Javascript Select Templating Example

By default the select takes the item.text and item.value of the data array 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 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 is set accordingly.

Download and try example

Preview in full screen

mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

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 (
      '<div class="md-item-template">' +
      '<img class="md-item-template-img" src="https://img.mobiscroll.com/demos/' +
      data.img +
      '.png" />' +
      '<div class="md-item-template-title">' +
      '<span>' +
      data.text +
      '</span>' +
      '<span class="md-item-template-year"> (' +
      data.year +
      ')</span>' +
      '</div>' +
      '<div class="md-item-template-artist">by ' +
      data.artist +
      '</div>' +
      '</div>'
    );
  },
});

<label>
    Albums
    <input mbsc-input id="demo-item-templating" data-dropdown="true" data-input-style="box" data-label-style="stacked" placeholder="Please select..." />
</label>

.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);
}