Javascript Select Setting values Example

Values can change in a couple of different ways: through defaults, interacting with the UI or programmatically. The select defaults to null (nothing is selected), which can be easily overridden with the defaultSelection option. The values are set by interacting with the component and making a selection or it can be done programmatically. Use the buttons option for showing/hiding set, cancel or add custom buttons.

Download and try example

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 Vue

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>
jsmobiscroll.select('#my-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>
jsmobiscroll.select('#my-select', {
    inputElement: document.getElementById('my-input'),
    defaultSelection: 'ber'
});

Default

Custom default

Setting values runtime

While the selected value can be changed by interacting with the select, you can use the setVal method to change it programmatically.

Javascript jQuery Angular React Vue

html<button mbsc-button id="set-boston">Boston</button>
<button mbsc-button id="set-london">London</button>
jsdocument
    .getElementById('set-boston')
    .addEventListener('click', function () {
        instance.setVal('bos');
    }, false);
document
    .getElementById('set-london')
    .addEventListener('click', function () {
        instance.setVal('lon');
    }, 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 Vue

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>
jsmobiscroll.select('#my-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>
jsmobiscroll.select('#my-select', {
    inputElement: document.getElementById('my-input'),
    buttons: ['cancel']
});