Behavior of <select multiple> lists. In principle it can be applied to any DOM element.


These elements have behavior:select applied by default:

  • <select size="2...N" multiple="checkmarks"></select>
  • <select|list multiple="checkmarks"></select>


Same as behavior:select.

Selected options are getting :checked state flag set therefore custom styling of selected state can be made using :checked pseudo-class in CSS:

select > option:checked { background-image: url(my-checkmark.png); }

behavior:select-checkmarks toggles :checked state of the option when user clicks on checkmark icon (foreground-image) of option element.


This behavior knows about:

  • size=integer – number of visible elements in the 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.


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.
  • SELECT_STATE_CHANGED event, one of options have its :checked state changed by user.


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


array of values, read/write, list of checked options.

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 ...;