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>  

Read More