Recipe 13.13. Retrieving Values from Multiselect Lists

Problem

You have a multiselect list from which you want to retrieve all the selected values.

Solution

Use the instance's selectedItems property to retrieve an array of the selected items. If you want to extract the data or label values specifically, use a for statement to loop through all the elements of the returned array.

Discussion

If a List component instance is used as a single-select list, you can retrieve the selected value just as you can retrieve the value from a combo box (see Recipe 13.11 for more details). However, if you have configured the list to allow for multiple selections, you need to use slightly different ActionScript code to retrieve the selected values.

Lists have a property named selectedItems that returns an array containing all the information for the items that the user has selected. The elements of the array are each objects with label and data properties. In order to do something useful with that array, you will more than likely need to use a for statement to loop through each of the elements of the array and extract the label and/or data value.

The simplest way to understand this is to take a look at an example. Suppose that you have a list with the instance name (exp 3pod.com) of clProducts. The list has many items, each with a label value. If the user has selected three items from the list before you try to retrieve the values, the instance's selectedItems property will return an array with three object elements. You can then use a for statement to loop through the elements of the array, extract the label property values, and do something with those values. The following code takes those label values and displays them in the Output panel within the test player:

	var aValues:Array = clProducts.selectedItems;
	for(var i:Number = 0; i < aValues.length; i++) {
	  trace(aValues[i].label);
	}

In most scenarios, you will want to retrieve the selected values from a list only once users have signaled that they want to process the information from the form. Typically that is done by clicking on a submit button. The following code shows a listener object used to process the selected values from a list once a button is clicked:

	
	var oListener:Object = new Object();
	oListener.click = function(oEvent:Object):Void {
	  var aValues:Array = clProducts.selectedItems;
	  for(var i:Number = 0; i < aValues.length; i++) {
	    trace(aValues[i].label);
	  }
	};
	cbtSubmit.addEventListener("click", oListener);

See Also

Recipe 13.12