Javascript Select Populating the picker Example

The select component takes care of rendering data in a scrollable and consumable way for the user. The date can be passed a couple of different ways:

Inline HTML, embedded in the markup - This is good if you only have a couple of static options.
With the data option - If you want to load model data this is the way to do it. This is the way to populate the select if you want to create a custom item template.
Remote data - Load it through the data option from a remote api/data source.

Download and try example

Inline HTML

The select and options are embedded in the markup.

Javascript jQuery Angular React Vue

html<label>
    HTML
    <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>
    <option value="la">Los Angeles</option>
    <option value="ny">New York</option>
    <option value="par">Paris</option>
    <option value="sf">San Francisco</option>
</select>
jsmobiscroll.select('#my-select', {
        inputElement: document.getElementById('my-input'),
        touchUi: 
    });

HTML

Data object

Pass the items to the data option if you are loading from the model or in case of item templating.

Javascript jQuery Angular React Vue

html<label>
    Data object
    <input mbsc-input id="my-select" data-dropdown="true" />
</label>
jsmobiscroll.select('#my-select', {
    touchUi: ,
    data: [
        { text: 'Atlanta', value: 'atl' },
        { text: 'Berlin', value: 'ber' },
        { text: 'Boston', value: 'bos' },
        { text: 'Chicago', value: 'chi' },
        { text: 'London', value: 'lon' },
        { text: 'Los Angeles', value: 'la' },
        { text: 'New York', value: 'ny' },
        { text: 'Paris', value: 'par' },
        { text: 'San Francisco', value: 'sf' }
    ]
});

Data object

Remote data

The data loaded from a remote source needs to be passed to the data option as in the previous example.

Javascript jQuery Angular React Vue

html<label>
    Remote data
    <input mbsc-input id="my-select" data-dropdown="true" />
</label>
jsvar inst = mobiscroll.select('#my-select', {
    touchUi: 
});

mobiscroll.getJson('https://trial.mobiscroll.com/content/languages.json', function (resp) {
    inst.setOptions({ data: resp });
}, 'jsonp');

Remote data

Preview in fullscreen