behavior: select

<select> 列表的标准行为。原则上，它可以应用于任何 DOM 元素。

Elements

默认情况下，这些元素应用了 behavior：select：

• <select size="2...N"></select> - 单选;

• <select|list></select> - 单选;

• <select|list multiple></select> - 多选;

• <select|list multiple="checkmarks"></select> - 带有复选标记的多选选项;

• <select|tree></select> - 分层单选;

• <select|tree multiple="checkmarks"></select> - 带有复选标记的分层多功能选择;

Model

可以 <select> 包含 <option> 任意标记中包含的元素。

该行为将 <option>'s 具有属性 role="option" 的任何其他 DOM 元素视为可选择的实体。

所选选项将设置 :current 状态标志。

 示例，简单选择：

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

并 <table> 作为选择：

<style>
  table.select > tbody { behavior:select; }
  table.select > tbody > tr:current { color:white; background:blue; }
</style>

<table.select>
  <tbody>
    <tr role="option" value="#ff0000"><td>Red</td><td>#FF0000<td></tr>
    <tr role="option" value="#00ff00"><td>Green</td><td>#00FF00<td></tr>
    <tr role="option" value="#0000ff"><td>Blue</td><td>#0000FF<td></tr>
  </tbody>
</table>

<option> s <select|tree> 中可能包含其他子 <option> s：

<select>
  <option expanded>
    <caption>Group A</caption>
    <option value="#ff0000">Red</option>
    <option value="#00ff00">Green</option>
    <option value="#0000ff">Blue</option>
  </option>
  <option>
    <caption>Group B</caption>
    ...
  </option>
</select>

Attributes

此行为可了解：

• size=integer - 列表中可见元素的数量。注意：select 元素的高度可以被 CSS 覆盖。

• name="name" - 标准属性名称 - 表单上输入元素的名称。

• novalue="text" - 如果 select 最初没有 <option selected> ，它将呈现此文本。

• as="type" - 定义 <option value="..."> 解释规则，接受：

• as="auto" ，尝试将选项的值解析为整数、浮点数、布尔值或长度值。如果解析失败，则以字符串形式返回值。

• as="integer" ，尝试将 option 的值解析为整数。如果解析失败，则以字符串形式返回值。

• as="float" ，尝试将 option 的值解析为浮点数。如果解析失败，则以字符串形式返回值。

• as="numeric" ，尝试将 option 的值解析为整数或浮点数。如果解析失败，则以字符串形式返回值。

• as="string" ，默认值，不解析选项的值。以字符串形式返回值。

• multiple ，选择同时支持多个选定选项。

• multiple="checkmarks" ，Select 支持多个选定选项同时使用专用复选标记进行选项选择。

• treelines" ， <select|tree> 只有分层列表绘制“树线”，以便更好地进行分组可视化。

Attributes of <option> elements inside the select:

• value="..." - 期权的值。如果省略，则将选项的 innerText 用作值（字符串）;

• selected - 定义选项 :current 的 / :checked 状态标志的初始值。所选选项定义所选选项的初始值。

• expanded - 定义 组 <option> 元素的 <select|tree> 初始 :expanded 状态。

Events

除了标准事件集（鼠标、键盘、焦点）之外，behavior：select 还会生成：

• "change" 事件，当用户更改选择（单击其中一个选项）时生成。已发布事件。

• "changing" 事件，选择即将改变。同步事件。

• "expanded" 事件，组选项被用户展开;

• "collapsed" 事件，组选项被用户折叠;

Properties

除了 DOM 元素的标准属性外，select 还支持：

• options - 引用保存 <option> 列表的 DOM 元素，在本例中，这是元素本身。

• select.currentOption - 元素，读/写，引用表示当前选项的 DOM 元素。

Methods

• select.optionByValue(val): Element 返回 DOM 元素，该元素表示具有关联 val 值的选项。如果未找到此类选项，则返回 null。

Commands

注意：命令通过调用 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;

Value

• 对于单选，由 as 属性确定的类型标量值，读/写。所选选项的值。如果未定义值，则选项的值是其值属性或选项的文本。

• 对于 multy select - 所选选项的值数组。数组的元素类型由 as 属性确定。

Selection change handling in script

raw onchange handler

var sel = document.$("select#some");
sel.onchange = function() { var v = this.value; ... }

on() subscription

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