Interactive KML Placemarks using HTML/JavaScript

My colleague stopped by this morning and asked me to see if there is any way to  implement combo box / drop-down list in KML file for dynamically selecting the Placemarks' information. Few hour of googling come up with a quick and dirty KML (adding custom data) using HTML/JavaScript in <ExtendedData> tag with combo box selection and pasted it here for our future reference. It may helps others as well. If there are any alternatives feel free to chime in.

 <?xml version="1.0" encoding="UTF-8"?>  
 <kml xmlns="http://www.opengis.net/kml/2.2">  
      <Document>  
         
      <Style id="MyBalloonStyle">  
           <BalloonStyle>  
                <text> <![CDATA[  
                <b>Example extended data template</b>  
   
                <div style="width:350px;" id="tree"></div>  
   
                <table id="table" border="1" >  
                     <tr><td>Company Name</td></tr>  
                     <tr><td><i>$[Company_Name]</i></td></tr>  
                     <tr><td>  
                          <select id = "treeListSelection" onchange = 'treeListChanged(value)'>  
                           <option>--Select--</option>  
                           <option value="tree 1">'Tree 1'</option>  
                           <option value="tree 2">'Tree 2'</option>   
                          </select>  
                     </td></tr>  
                </table>    
   
                <script type="text/javascript">   
                 function treeListChanged(value){  
                     document.getElementById('tree').innerHTML = value ;        
                 }  
                </script>  
   
                ]]></text>  
                <bgColor>ffffffbb</bgColor>  
           </BalloonStyle>  
           <IconStyle> <color>ffffffff</color> <scale>1</scale>  
                <Icon><href>http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png</href>  
                </Icon>  
           </IconStyle>  
           <LabelStyle>   
                <scale>0</scale>   
           </LabelStyle>  
      </Style>          
      <Folder> <name>Using drop-down/combobox in KML</name>  
           <Placemark>  
                <name>Comp 1</name>  
                <styleUrl>#MyBalloonStyle</styleUrl>  
                <ExtendedData>  
                     <Data name="Company_Name"><value>Company 1</value></Data>  
                </ExtendedData>  
                <Point>   
                     <coordinates>-122.034924,37.331586,0</coordinates>  
                </Point>  
           </Placemark>  
             
           <Placemark>  
                <name>Comp 2</name>  
                <styleUrl>#MyBalloonStyle</styleUrl>  
                <ExtendedData>  
                     <Data name="Company_Name"><value>Company 2</value></Data>  
                </ExtendedData>  
                <Point>   
                     <coordinates>-122.084676,37.421742,0</coordinates>  
                </Point>  
           </Placemark>  
      </Folder>  
      </Document>  
 </kml>  

Google Earth , HTML5 , JavaScript , KML , KMZ