Handling selection lists

Lists are a basic UI component for displaying all kinds of information, actions, and navigation structures. Editing and organizing information in lists can be made easier by using markable lists. Different line layouts offer flexibility in presenting information; lines can contain different sizes of images and text to suit design needs.

Using HTML tags

You can use HTML select tags or JavaScript to create selection lists.

To use list components

Create an HTML form element that contains the select tag.

<form action = "">
+<select>
+  <option value = "coffee">Coffee</option>
+  <option value = "tea">Tea</option>
+  <option value = "water">Water</option>
+  </select>
+</form>

Using JavaScript to create selection lists

Selection lists allow users to select from a list of options. You can use JavaScript to create selection lists. Specify options as an array of JavaScript objects, where each object represents one option. Each option object has two properties: value and text. The value property can be any JavaScript value, including object references and is used to represent the concrete value of the option. The text property is used to display the option in the user interface. The value could for example be a boolean true or false while the text could be Yes or No.

The set of currently selected options can be set or retrieved from a selection control using getter and setter methods. For single selection controls the selected option is specified as a single reference to one of the options in the control. For multiple selection the selected options are specified as an array of references to zero or more of the options in the control. Refer to the instances of the options in the control; not other instances even if they are identical in value or text.

Selection controls fire SelectionChanged events when the user makes a selection in the control.

For an example of using JavaScript to create a selection list, see WRT Listbox Widget.

To create an array of JavaScript objects

For multiple selection, specify an array of references to the options in the control.

// create an array with three options
+var options = [
+        { value: 1, text: "Coffee" },
+        { value: 2, text: "Tea" },
+        { value: 3, text: "Water" }
+    ];
+

Using lists in touch devices

Use lists with single-line items and large graphics on touch devices. For more information about touch-specific issues, see Touch-specific issues in lists.