Flex combobox selecteditem

In this tutorial page you will learn how to utilize the selectedItem property in flex, for getting the details associated to items inside the flex combo box control.

Flex combobox selecteditem

Flex combobox selecteditem

     

In this tutorial page you will learn how to utilize the selectedItem property in flex, for getting the details associated to items inside the flex combo box control. Below example contains a flex combo box control with id value combo. This flex control contains eleven items and with selectedItem property  details of each item is published inside the flex TextArea control under flex Panel control background. Property selectedItem returns the string value of the item, that means, name of the item is returned with which the item is included in the combo box item list. 

Syntax for using the property
ComboBox_id_value.selectedItem

Example in the tutorial page contains some links to well trusted web site pages, with which you can enrich your knowledge.

oksoo.mxml

<?xml version = '1.0' encoding = 'utf-8'?>
<mx:Application
  xmlns:mx = 'http://www.adobe.com/2006/mxml'
>

  
  <mx:Script>
  
  <!-- 
  function Item_detail is setting combo box 
  item information in to each item
  -->
  
  public function Item_detail(event:Event):void{
  
  if(combo.selectedItem == 'Roseindia'){
  txt.text = 'Software development company'
  link_0.visible = true;
  }
  if(combo.selectedItem == 'Ajax'){
  txt.text = 'Asynchronous JavaScript' 
 + ' and XML is used to fetch' 
 + ' the data from web server' 
 + ' without refreshing the whole'
 + ' page.';
  link_6.visible = true;
  }
  if(combo.selectedItem == 'Dojo'){
  txt.text = 'Another great' 
  + ' framework for developing'
  + ' ajax based applications.';
  link_7.visible = true;
  }
  if(combo.selectedItem == 'Spring'){
  txt.text = 'Spring Framework Install -' 
  + ' a quick tutorial to install' 
  + ' Spring Framework on your' 
  + ' development environment.';
  link_8.visible = true;
  }
  if(combo.selectedItem == 'JSF'){
  txt.text = 'JSF tutorials we will' 
  + ' describe you how to' 
  + ' implement all theoretical'
  + ' concepts of JSF in developing'
  + ' robust  JSF web application.';
  link_9.visible = true;
  }
  if(combo.selectedItem == 'Combo Box'){
  txt.text = 'A Flex control'
  link_10.visible = true;
  }
  if(combo.selectedItem == 'Flex'){
  txt.text = 'Adobe technology to enhance the'
 + ' users capability in building'
 + ' rich internet applications.';
  link_1.visible = true;
  }
  if(combo.selectedItem == 'Ant'){
  txt.text = "Apache's Ant technology, which" 
 + ' is a mean to build any'
 + ' programming language projects.';
  link_2.visible = true;
  }
  if(combo.selectedItem == 'Core Java'){
  txt.text = 'Java is great programming language'
  +  ' for the development of enterprise'
  + 'grade applications.';
  link_3.visible = true;
  }
  if(combo.selectedItem == 'Mysql'){
  txt.text = 'MySQL tutorial is available at'
  + ' free of cost and 365x24 days'
  + ' for your help';
  link_4.visible = true;
  }
  if(combo.selectedItem == 'J2EE'){
  txt.text = 'Application server was developed'
  + ' to support for developing the'
  + ' enterprise applications for security'
  + ' and state maintenance with the data'
  + ' base and persistence.';
  link_5.visible = true;
  }
  }
  
  public function clearData():void{
  txt.text = '';
  }
  
  </mx:Script>

  
  
  <!-- functions created for providing item links --> 
  
  
<mx:Script>

  public function roseindia(event:Event):void{
  var url_0:URLRequest;
url_0 = new URLRequest('http://www.roseindia.net/');
  navigateToURL(url_0);
  }
  public function Flex(event:Event):void{
  var url_1:URLRequest;
url_1 = new URLRequest('http://www.roseindia.net/flex/');
  navigateToURL(url_1);
  }
  public function Ant(event:Event):void{
  var url_2:URLRequest;
url_2 = new URLRequest('http://www.roseindia.net/tutorials/ant/');
  navigateToURL(url_2);
  }
  public function Core_Java(event:Event):void{
  var url_3:URLRequest;
url_3 = new URLRequest('http://www.roseindia.net/java/');
  navigateToURL(url_3);
  }
  public function Mysql(event:Event):void{
  var url_4:URLRequest;
url_4 = new URLRequest('http://www.roseindia.net/mysql/');
  navigateToURL(url_4);
  }
  public function J2EE(event:Event):void{
  var url_5:URLRequest;
url_5 = new URLRequest('http://www.roseindia.net/ejb/');
  navigateToURL(url_5);
  }
  public function Ajax(event:Event):void{
  var url_6:URLRequest;
url_6 = new URLRequest('http://www.roseindia.net/ajax/');
  navigateToURL(url_6);
  }
  public function Dojo(event:Event):void{
  var url_7:URLRequest;
url_7 = new URLRequest('http://www.roseindia.net/dojo/');
  navigateToURL(url_7);
  }
  public function Spring(event:Event):void{
  var url_8:URLRequest;
url_8 = new URLRequest('http://www.roseindia.net/spring/');
  navigateToURL(url_8);
  }
  public function JSF(event:Event):void{
  var url_9:URLRequest;
url_9 = new URLRequest('http://www.roseindia.net/jsf/');
  navigateToURL(url_9);
  }
  public function Combo_Box(event:Event):void{
  var url_10:URLRequest;
url_10 = new URLRequest('http://www.livetechtalk.com/');
  navigateToURL(url_10);

  }
  public function Dating(event:Event):void{
  var url_11:URLRequest;
url_11 = new URLRequest('http://www.onedatingtips.com/');
  navigateToURL(url_11);
  }
  
</mx:Script>
  
  
  
  
<mx:Script>
  
  <!-- 
  function clickEventListener is a 
  handler function function inside which 
  mouse click event is added into 
  the Link Buttons
  -->
  public function clickEventListener():void{
  
  link_0.addEventListener(MouseEvent.CLICK, roseindia);
  link_1.addEventListener(MouseEvent.CLICK, Flex);
  link_2.addEventListener(MouseEvent.CLICK, Ant);
  link_3.addEventListener(MouseEvent.CLICK, Core_Java);
  link_4.addEventListener(MouseEvent.CLICK, Mysql);
  link_5.addEventListener(MouseEvent.CLICK, J2EE);
  link_6.addEventListener(MouseEvent.CLICK, Ajax);
  link_7.addEventListener(MouseEvent.CLICK, Dojo);
  link_8.addEventListener(MouseEvent.CLICK, Spring);
  link_9.addEventListener(MouseEvent.CLICK, JSF);
  link_10.addEventListener(MouseEvent.CLICK, Combo_Box);
  
  }

<!-- void function vanish vanishes all the link buttons 
  on the application background
-->
  public function vanish():void{
  link_0.visible = false;
  link_1.visible = false;
  link_2.visible = false;
  link_3.visible = false;
  link_4.visible = false;
  link_5.visible = false;
  link_6.visible = false;
  link_7.visible = false;
  link_8.visible = false;
  link_9.visible = false;
  link_10.visible = false;
  }


</mx:Script>

  
  
<!-- 
  <mx:Style>, a cascading style sheet component 
  used for setting styles of flex components 
-->  
  
<mx:Style>
  .baadshah {color : #3399FF}
 Text {font-size : 12pt}
 Text {fontStyle : bold}
 TextArea {color : #330099}
 TextArea {font-size : 12pt}
 LinkButton {color : #660066}
</mx:Style>
  

<!-- flex panel control -->  
<mx:Panel 
  title = 'Roseindia panel background' 
  width = '100%' height = '100%'
  color = '#660000'
>
  
  <!-- flexx combo box control -->
  <mx:ComboBox 
  mouseOver = 'clickEventListener()'  
  valueCommit= 'clearData()' 
  id = 'combo' 
  
  change = 'Item_detail(event)'>
  <mx:String>Combo Box</mx:String>
  <mx:String></mx:String>
  <mx:String>Roseindia</mx:String>
  <mx:String>Flex</mx:String>
  <mx:String>Ant</mx:String>
  <mx:String>Core Java</mx:String>
  <mx:String>Mysql</mx:String>
  <mx:String>J2EE</mx:String>
  <mx:String>Ajax</mx:String>
  <mx:String>Dojo</mx:String>
  <mx:String>Spring</mx:String>
  <mx:String>JSF</mx:String>
  
  
  </mx:ComboBox>
  
  
  <mx:ControlBar horizontalAlign = 'center'>
  <mx:Text text = '{combo.selectedItem}' /> 
  </mx:ControlBar>
  
  <mx:TextArea
  id = 'txt' 
  styleName = 'baadshah'
  width = '60%' height = '40%'
  color = '#330000'  
  />
  
  
<mx:HBox styleName = 'baadshah' >
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_0' 
  label = 'Roseindia' visible = 'false'/> 
  <mx:LinkButton 
  id = 'link_1' 
  label = 'Flex' visible = 'false'/> 
  </mx:VBox>
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_2' 
  label = 'Ant' visible = 'false'/> 
  <mx:LinkButton 
  id = 'link_3' 
  label = 'Core Java' visible = 'false'/> 
  </mx:VBox>
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_4' 
  label = 'Mysql' visible = 'false'/> 
  <mx:LinkButton 
  id = 'link_5' 
  label = 'J2EE' visible = 'false'/> 
  </mx:VBox>
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_6' 
  label = 'Ajax' visible = 'false'/> 
  <mx:LinkButton 
  id = 'link_7' 
  label = 'Dojo' visible = 'false'/> 
  </mx:VBox>
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_8' 
  label = 'Spring' visible = 'false'/> 
  <mx:LinkButton 
  id = 'link_9' 
  label = 'JSF' visible = 'false'/> 
  </mx:VBox>
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_10' 
  label = 'Combo Box' 
  visible = 'false'
  mouseOver = 'Dating(event)'
  /> 
  </mx:VBox>
</mx:HBox>
  <mx:ControlBar horizontalAlign = 'center'>
  <mx:Button 
  label = 'vanish' 
  click = 'vanish()'
  color = '#FF00FF'  
  />
  </mx:ControlBar>
  
</mx:Panel>
</mx:Application>

 

oksoo.swf



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Download the code

 

 

Tutorials

  1. Action Script custom components
  2. Flex Tutorials
  3. Login.mxml
  4. Performing Object Introspection
  5. For..in loop
  6. How to display on textbox using ObjectUtil class
  7. Introducing Flex
  8. Downloading and Installing Flex
  9. Flex Example
  10. Flex Combo Box example
  11. Flex wipe behavior example
  12. Flex Validator example
  13. Flex Tab Navigator example
  14. Flex Cascading Style Sheets example
  15. Flex Alert Box example
  16. Flex Remove Event Listener example
  17. Flex dispatch event example
  18. Flex Custom mxml tags example
  19. Flex current target property example
  20. Flex Circle drawing example
  21. Flex adding single event on varied components Example
  22. Flex Add Event Listener example
  23. Action Script 'source' attribute example
  24. Action Script 'include' statement example
  25. Flex combobox selecteditem
  26. Flex data binding example
  27. Compiling MXML files with FlexBuilder
  28. Flex Handling KeyboardEvents
  29. Flex checkbox control example
  30. Flex event phase detection example
  31. Explore key & mouse with Flex
  32. Flex KeyboardEvent Listener
  33. Flex KeyboardEvent properties
  34. Flex target property example
  35. Flex terminating event flow example
  36. Downloading and Installing Flex Builder
  37. Eclipse flex ant coding example
  38. Flex Container
  39. Flex Introduction
  40. What are Flex Containers