Javascript Select Country Dropdown Example

Use the select component as a country picker on mobile and desktop. You can add the dropdown to any input or use Mobiscroll input fields. If you don't want to make it a dropdown, you can embed the picker inline right into a page.

Search is enabled through the filter option.

In this example the data is loaded from a remote JSON in the following format: { "value": "FJ", "group": "F", "text": "Fiji" } and the flags are loaded from our server. For your implementation you should embed the list and flags into your own page.

For the image & text rendering use a custom item template.

Download and try example

Preview in full screen

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

var inst = mobiscroll.select('#demo-country-picker', {
  display: 'anchored',
  filter: true,
  itemHeight: 40,
  renderItem: function (item) {
    return (
      '<div class="md-country-picker-item">' +
      '<img class="md-country-picker-flag" src="https://img.mobiscroll.com/demos/flags/' +
      item.data.value +
      '.png" />' +
      item.display +
      '</div>'
    );
  },
});

mobiscroll.getJson('https://trial.mobiscroll.com/content/countries.json', function (resp) {
  var countries = [];
  for (var i = 0; i < resp.length; ++i) {
    var country = resp[i];
    countries.push({ text: country.text, value: country.value });
  }
  inst.setOptions({ data: countries });
});

<label>
    Countries
    <input mbsc-input id="demo-country-picker" data-dropdown="true" data-input-style="box" data-label-style="stacked" placeholder="Please select..." />
</label>

.md-country-picker-item {
    position: relative;
    line-height: 20px;
    padding: 10px 0 10px 40px;
}

.md-country-picker-flag {
    position: absolute;
    left: 0;
    height: 20px;
}

.mbsc-scroller-wheel-item-2d .md-country-picker-item {
    transform: scale(1.1);
}