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