behavior:dropdown-select

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.

Events

Other than standard set of events (mouse, keyboard, focus) behavior:button 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

N/A – behavior:select does not introduce any specific methods.

Properties

Other than standard properties of DOM elements the drowpdown 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 ...;