dizmoElements selectbox

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

Visual

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 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 backside of a dizmo, you need to update it when the dizmo is turned to the backside, to ensure that the size of the selectbox 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');