behavior:dropdown-select

Standard behavior of <select> with dropdown option lists.

Elements

These elements have behavior:select applied by default:

• <select size="1"></select>
• <select|dropdown></select>

Model

The behavior transforms select declaration:

<select>
  <option value="#ff0000" selected>Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>

into this

<select>
  <caption>Red</caption>
  <button />
  <popup>
    <option value="#ff0000" selected>Red</option>
    <option value="#00ff00">Green</option>
    <option value="#0000ff">Blue</option>
  </popup>
</select>

These parts get default styling from master.css but can be re-styled by host document styles if needed.

Attributes

This behavior knows about:

• size=integer - number of visible elements in the dropdown list. Note: height of the select element can be overriden by CSS.
• name="name" - standard attribute name - name of the input element on a form.
• novalue="text" - if select has no <option selected> initially it will have this text rendered. The novalue attribute makes this select nullable - if there is no option are selected then value of the element is undefined.
• editable - this attribute causes behavior:edit to be applied to the <caption> element making it editable.
• as="...type...", defines <option value> parsing rules, accepts following values:
  • as="auto", default value, tries to parse option's value as integer, float, boolean or length value. If parsing fails it returns value as a string.
  • as="integer", tries to parse option's value as integer. If parsing fails it returns value as a string.
  • as="float", tries to parse option's value as float. If parsing fails it returns value as a string.
  • as="numeric", tries to parse option's value as either integer or float. If parsing fails it returns value as a string.
  • as="string", does not parse option's value. Returns value as a string.
• popup="external-popup-id", id of <popup|select> element containing list of <option>'s. Such external <popup|select> mode is usefull in situations when your design requires placement of <select>s inside repeatable sections (like +vlist for example). This will minimize processing time and memory consumption. 

Events

Other than standard set of events (mouse, keyboard, focus) behavior:dropdown-select generates:

• SELECT_SELECTION_CHANGED event, generated when user changes selection of the select (click on one of options). Posted event.
• SELECT_SELECTION_CHANGING event, selection is about to change. Synchronous event.

State flags

Other than standard state flags like :hover, :active, :focus and so on the dropdown also manages:

• :expanded - this flag is on when popup option list is shown.

Commands

Note: commands are invoked by calling element.execCommand("cmd-name"[,params])

• "set-current" - when the command is sent to an <option> inside the select it causes the option to be current;  

Methods

showPopup([true|false])

- shows (or closes) popup list widget.

Properties

Other than standard properties of DOM elements the dropdown also supports:

• options - reference to DOM element that holds <option> list, <popup>  in this case.

Value

• editable select - string, read/write - content of the <caption>
• nullable select - any | undefined, read/write. value of selected option. Value of the option is its value attribute or option's text if there is no value defined on the <option>. Before user makes any choice value of the select is undefined.
• normal select - any, read/write. value of selected option. Value of the option is its value attribute or option's text if there is no value defined.
  If no <option selected> defined then value of the select is the value of its first <option> element.

Selection change handling in script

raw onValueChanged handler

var btn = $(select#some);
btn.onValueChanged = function() { var v = this.value; ... }

on() subscription

var btn = $(select#some);
btn.on("change", function() { ... event handling code ... });
self.on("change", "select#some", function() { ... event handling code ... });

decorators.tis handler

include "decorators.tis";
@change @on "select#some" :: ... event handling code ...;