Selectbox

Visual

The selectbox element enhances a default HTML selectbox and styles it to fall in line with other dizmoElements.

Data type

<select id="my-select" data-type="dizmo-selectbox" >
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Constraints

Everything should work as it does on a default selectbox. The change event is being propagated, so you can just use the default event to interact with the element. It only works on select elements. If the underlying element changes, a call to the update function is required.

If you add a selectbox to the back side of a dizmo, you need to update it when the dizmo is turned to the back side, to ensure its size is updated correctly. Add the update call to the dizmo.onShowBack function as following:

    dizmo.onShowBack(function() {
        DizmoElements('#my-select').dselectbox('update');
    });

Usage

Manual initialization:

DizmoElements('#my-select').dselectbox();

To react to a change in the selectbox:

DizmoElements('#my-select').on('change', function(e) {
    var selected=DizmoElements('#my-select').val();
});

To update the element when the underlying select changes:

DizmoElements('#my-select').dselectbox('update');

To set the value programmatically, use the provided value function:

DizmoElements('#my-select').dselectbox('value', 'b');

To get the value, you can either use

DizmoElements('#my-select').val();

or

DizmoElements('#my-select').dselectbox('value');