-
Notifications
You must be signed in to change notification settings - Fork 192
DropDowns
NOTE: bbUI DropDowns on BB5/BB6/B7 require BlackBerry WebWorks SDK v2.3 for Smartphones or higher. See config.xml requirements for BB5/BB6/BB7 DropDowns
Dropdowns are created by adding a <select> element to your screen. You can also set the data-bb-style="stretch" attribute to the <select> to have it stretch to the width of its container. Add an "onchange" event to your <select> element to capture when the user changes their selection. To specify the default selected item when the control first shows you can can use the selected="true" attribute on the desired <option> element.
<div data-bb-type="screen">
<div data-bb-type="panel-header">Font</div>
<div data-bb-type="label"> Font Family:</div>
<select data-bb-style="stretch" onchange="alert('changed')" id="fontfamily">
<option value="bbalphasans" selected="true">BBAlpha Sans</option>
<option value="arial">Arial</option>
<option value="andalemono">Andale Mono</option>
</select>
</div>
</div>
BlackBerry 10 has an additional feature where you can specify a data-bb-label="my label" to have the label text appear in the dropdown control.
To select an item in a dropdown from JavaScript you can use the setSelectedItem() function that has been added to the <select> object. In many browsers, the onchange event is not fired on a <select> if the value is set from JavaScript. Only if it is set from the interaction with the UI. Because of this bbUI cannot listen to the change made from outside JavaScript and apply the styling in the UI. When you call the setSelectedItem() method, the onchange of the select will also fire.
An example of how to select an item of the <select> element seen in the above sample is as follows:
document.getElementById('fontfamily').setSelectedItem(1); //Parameter is the index of the item in the list