Single select
Single value selection is the default behavior of the picker. You can explicitly enable it by setting the selectMultiple to false.
You can dynamically switch between single and multiple select.
Looking for multiple select? Check out the next example →
Demo
html<label>
Single select
<input mbsc-input id="my-input" data-dropdown="true" />
</label>
<select id="single-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('#single-select', {
inputElement: document.getElementById('my-input'),
touchUi:
});
JSHTML
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.select('#demo-single-select', {
inputElement: document.getElementById('demo-single-select-input'),
});
<label>
Single select
<input mbsc-input id="demo-single-select-input" placeholder="Please select..." data-dropdown="true" data-input-style="outline" data-label-style="stacked" />
</label>
<select id="demo-single-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>