this is my Activity.xml:-
\[code\]<child_2 entity_id="2" value="http://stackoverflow.com/questions/15741816/Root" parent_id="1"> <child_4 entity_id="4" value="http://stackoverflow.com/questions/15741816/Activities" parent_id="2"> <child_10066 entity_id="10066" value="http://stackoverflow.com/questions/15741816/Physical1" parent_id="4"> <child_10067 entity_id="10067" value="http://stackoverflow.com/questions/15741816/Cricket" parent_id="10066"> <child_10068 entity_id="10068" value="http://stackoverflow.com/questions/15741816/One Day" parent_id="10067"/> </child_10067> </child_10066> <child_10069 entity_id="10069" value="http://stackoverflow.com/questions/15741816/Test2" parent_id="4"/> <child_10070 entity_id="10070" value="http://stackoverflow.com/questions/15741816/Test3" parent_id="4"/> <child_10071 entity_id="10071" value="http://stackoverflow.com/questions/15741816/Test4" parent_id="4"/> <child_10072 entity_id="10072" value="http://stackoverflow.com/questions/15741816/Test5" parent_id="4"/> <child_5 entity_id="5" value="http://stackoverflow.com/questions/15741816/Physical" parent_id="4"/> </child_4></child_2>\[/code\]this is my try:-\[code\] <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15741816/jquery.js"></script> <title>Using jQuery and XML to populate a drop-down box demo</title> <script> $(document).ready(function(){ $.ajax({ type: "GET", url: "Activity.xml", dataType: "xml", success: function(xml) { var select = $('#mySelect'); var catName = $(this).attr("Physical1"); var parent = $("<ul></ul>"); alert("hi"); $(xml).find("Function").each(function(){ var funcName = $(this).attr("Physical1"); parent.append("<li>" + funcName + "</li> "); alert(parent); }); } }); }); </script> </head> <body> <div id="mySelect">hi </div> </body> </html>\[/code\]i want to this type of output list:-
\[code\]<ul><li>Physical1 <ul> <li>Cricket <ul> <li>One Day</li> </ul> </li> </ul></li><li>Test2</li><li>Test3</li><li>Test4</li><li>Test5</li><li>Pysical</li></ul>\[/code\]when click on physical1 display list there child when click on Cricket then display there child...
\[code\]<child_2 entity_id="2" value="http://stackoverflow.com/questions/15741816/Root" parent_id="1"> <child_4 entity_id="4" value="http://stackoverflow.com/questions/15741816/Activities" parent_id="2"> <child_10066 entity_id="10066" value="http://stackoverflow.com/questions/15741816/Physical1" parent_id="4"> <child_10067 entity_id="10067" value="http://stackoverflow.com/questions/15741816/Cricket" parent_id="10066"> <child_10068 entity_id="10068" value="http://stackoverflow.com/questions/15741816/One Day" parent_id="10067"/> </child_10067> </child_10066> <child_10069 entity_id="10069" value="http://stackoverflow.com/questions/15741816/Test2" parent_id="4"/> <child_10070 entity_id="10070" value="http://stackoverflow.com/questions/15741816/Test3" parent_id="4"/> <child_10071 entity_id="10071" value="http://stackoverflow.com/questions/15741816/Test4" parent_id="4"/> <child_10072 entity_id="10072" value="http://stackoverflow.com/questions/15741816/Test5" parent_id="4"/> <child_5 entity_id="5" value="http://stackoverflow.com/questions/15741816/Physical" parent_id="4"/> </child_4></child_2>\[/code\]this is my try:-\[code\] <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15741816/jquery.js"></script> <title>Using jQuery and XML to populate a drop-down box demo</title> <script> $(document).ready(function(){ $.ajax({ type: "GET", url: "Activity.xml", dataType: "xml", success: function(xml) { var select = $('#mySelect'); var catName = $(this).attr("Physical1"); var parent = $("<ul></ul>"); alert("hi"); $(xml).find("Function").each(function(){ var funcName = $(this).attr("Physical1"); parent.append("<li>" + funcName + "</li> "); alert(parent); }); } }); }); </script> </head> <body> <div id="mySelect">hi </div> </body> </html>\[/code\]i want to this type of output list:-
\[code\]<ul><li>Physical1 <ul> <li>Cricket <ul> <li>One Day</li> </ul> </li> </ul></li><li>Test2</li><li>Test3</li><li>Test4</li><li>Test5</li><li>Pysical</li></ul>\[/code\]when click on physical1 display list there child when click on Cricket then display there child...