I am trying to create a hierarchical transformation that can pull data from custom child document types. In the content tree, I have several custom documents called 'JobCategories' and each one has several child document types called 'JobPosting.' The job posting document types stores the description of each job posting in the database.

I have the transformation set up do display the information in an accordion format - each 'JobCategory' is a main section of the accordion and, when it is clicked on, it slides down to reveal a select/dropdown box. The select box contains the names of all of the category's child documents. What I am try to do is that, when a user selects an item from the dropdown, the stored job description will be loaded into a div below the select box.

I tried using the following jQuery in a transformation, but, since I can't attach an event handler directly to the

option

tag, I am not able to target the specific child document selected. These are the all the transformations in the hierarchical transformation combined (they are separated and use the correct transformation type in my app).

<ul class="accordion">
  <li>
    <a href="#" class="accordionButton"><%#Eval("JobCategory") %></a>
    <select onChange='loadJob{%DocumentID%}();'>
      <option><%# Eval("JobTitle") %></option>
    </select>
  <script>
    function loadJob{%DocumentID%}(){
      $('#jobDescrip').html({%JobDescription.JSEncode()%});
    }
  </script>
  </li>
</ul>

Thanks for the help