Dojo: The Definitive Guide

MultiSelect

MultiSelect is a simple wrapper (with the attributes listed in Table 13-11) around a native SELECT element (with the attribute multi=true ) that inherits from _FormWidget. The primary reason that it is included in Dijit is because it facilitates interaction with the dijit.Form wrapper (coming up later in this chapter) and streamlines the task of otherwise having to style the SELECT element yourself.

Table 13-11. MultiSelect

Name	Comment
size	The number of elements to display on a page. 7 by default.
addSelected(/*dijit.form.MultiSelect*/select)	Moves the selected nodes from another MultiSelect into this MultiSelect.
getSelected( )	Returns the selected nodes in the widget.
setValue(/*Array*/values)	Sets the value of each node in the widget according to the sequential values provided in the values Array.
invertSelection(/*Boolean*/fireOnChange)	Inverts the selection. If fireOnChange is true, then an onChange event is fired.

Because MultiSelect is just a lightweight wrapper around the HTML equivalent, there is little to say about that is specific to Dojo. You can define a MultiSelect in markup, as shown in Example 13-7.

Example 13-7. Typical MultiSelect in markup

<select multiple="true" name="foo" dojoType="dijit.form.MultiSelect"
 style="height:100px; width:100px; border:3px solid black;">

   <option value="TN" selected="true">Tennessee</option>
   <option value="VA">Virginia</option>
   <option value="WV">West Virginia</option>
   <option value="OH">Ohio</option>

</select>