update the tree structure and Data table

update the tree structure and Data table

Hi All,
 
I have requirement to update the tree structure and Data table based on the selection by a dropdown menu in the same page.
 
 
Please suggest and give some example how to do it.
 
My code snippest:
 
 

<

 div class = "main" >

<

 table height = "400px" cellpadding = "0" cellspacing = "0" border = "1" style =" font-size : 10px ; font-family : Verdana " >

< tr >

< td valign = "top" width = "165px" >

< div style =" height : 20px ; font : 12px Tahoma, Arial ; border-bottom : solid 1px gray ;" >

View:

 &nbsp;

< select id="groupList" style=" width: 124px ;" onchange="" >

<option value="" >ALL Groups</option>

<g:each in=" ${glist}" var="gl" >

<option value=" ${gl}" >${gl}</option>

</g:each>

</select>

</ div >

< div style =" float : left ; border : 1px ; overflow : scroll ; height : 380px ; width : 165px ;" >

<ul id="tree1" >

<g:each id="test" in=" ${tmap}" status="i" var="gvar" >

<input type="checkbox" />

<g:link action="mcireditgroupoption1" style="text-decoration:none" >${gvar.key}</g:link>

<ul>

<g:each in=" ${gvar.value}" status="j" var="avar" >

<input type="checkbox" />

<g:link action="mciragentoption3" style="text-decoration:none" >${avar}</g:link>

</g:each>

</ul>

</g:each>

</ul>

</ div >

</ td >

< td width = "10px" ></ td >

< td width = "813px" valign = "top" >

< div style =" height : 20px ;" >

< table style =" font : 12px Tahoma, Arial ;" >

< tr >

< td width = "415" align = "left" > Users </ td >

< td >

</ td >

</ tr >

</ table >

</ div >

< div >

<table class="dataTable" id="example" >

<thead>

<tr>

<th>active</th>

<th>First Name</th>

<th>Last Name</th>

<th>User ID</th>

<th>Queue(s)</th>

<th>Last Modified</th>

<th>actions</th>

</tr>

</thead>

<tbody>

<g:each in=" ${list}" status="i" var="sub" >

<tr class=" ${(i%2)==0 ? 'odd' :'even' } ${sub[4] ? '' :'inactive' }" >

<td style="text-align: center ;">

<g:if test=" ${sub[4]}" >

<img src=" <g:createLinkTo dir='images' file='icon_active.png' />" />

</g:if>

</td>

<td style="font-size: 10px ; font-family: Verdana ">

${sub[0]}

</td>

<td style="font-size: 10px ; font-family: Verdana ">

${sub[1]}

</td >

<td style="font-size: 10px ; font-family: Verdana ">

${sub[2]}

</td>

<td style="font-size: 10px ; font-family: Verdana ">

${sub[3]}

</td>

<td style="font-size: 10px ; font-family: Verdana ">

${sub[5]}

</td>

<td>

<g:link action="mciragentoption3" >

<img align="absmiddle" src=" <g:createLinkTo dir='images' file='icon_edit.png' />" />

<g:message code="edit" />

</g:link>

<g:link action="mciragentoption3" >

<img align="absmiddle" src=" <g:createLinkTo dir='images' file='Copy-Icon.png' />" />

<g:message code="copy" />

</g:link>

</td>

</tr>

</g:each>

</tbody>

</table>

</div>

</td>

</tr >

</

 table>

</

 div >

</
div >
 
 
Please help Me ..
Thanks
Sabyasachi