Controlling the default value

The select has no selected value by default. You can however manually set a default value through the 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.

Javascript jQuery Angular React 
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 change by interacting with the select, you can use the setVal method to change it programmatically.

Javascript jQuery Angular React 
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.

Javascript jQuery Angular React 
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']
});
Preview in fullscreen