behavior:select-multiple

behavior:select-multiple

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

Elements

These elements have behavior:select applied by default:

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

Model

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); }

Attributes

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.

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.

Methods

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

Value

array of values, read/write, list of selected 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 ...;