this is my xml file :-\[code\]<root><child1 entity_id = "1" value= "http://stackoverflow.com/questions/14494752/Asia"> <child2 entity_id = "2" value = "http://stackoverflow.com/questions/14494752/india"> <child3 entity_id = "3" value = "http://stackoverflow.com/questions/14494752/Gujarat"> <child5 entity_id = "5" value ="http://stackoverflow.com/questions/14494752/Rajkot"></child5> </child3> <child4 entity_id = "4" value = "http://stackoverflow.com/questions/14494752/Rajshthan"> <child6 entity_id = "6" value = "http://stackoverflow.com/questions/14494752/Ajmer"></child6> </child4> </child2></child1></root>\[/code\]this is my code :- \[code\]<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>Region Value</title><script type="text/javascript" src="http://stackoverflow.com/questions/14494752/jquery.js"></script><script>data = http://stackoverflow.com/questions/14494752/false;$(document).ready(function() { $("li").live("click", function(event) { event.cancelBubble = true; loadChild($(this).attr("id"), event); return false; })});function loadChild(id) { var obj = $("#" + id); if(obj.data("loaded") == null) { ul = "<ul>"; var path = (id == 0) ? "root" : "[entity_id='" + id + "']"; $(data).find(path).children().each(function(){ var value_text = $(this).attr('value'); var id = $(this).attr('entity_id'); ul += "<li id='" + id + "'>" + value_text + "</li>"; }); ul += "</ul>"; $("#" + id).append(ul); obj.data("loaded", true); } else { $("#" + id + " ul").remove(); obj.data("loaded", null); }} $(function() { $('#update-target a').click(function() { $.ajax({ type: "GET", url: "final.xml", dataType: "xml", success: function(xml) { data = http://stackoverflow.com/questions/14494752/xml; loadChild("0"); $(xml).find('child1').each(function(){ var value_text = $(this).attr('value'); var id = $(this).attr('entity_id'); $("<li id='" + id + "'></li>") .html(value_text) .appendTo('#update-target ol'); }); //close each( } }); //close $.ajax( }); //close click( }); //close $(</script> </head> <body><input type="text" id="update-target"><input type="button" name="button" value="http://stackoverflow.com/questions/14494752/Search" onclick="loadChild()" > <p> <div id='update-target'> <a href="http://stackoverflow.com/questions/14494752/#">Click here to load value</a> <ol id="0"></ol> </div> </p></body></html>\[/code\]this is my output:\[code\]__________________(Textbox)search(button) Click here to load value: Asia india Gujarat Rajkot Rajshthan Ajmer\[/code\]now i want to :
if i entered in text box Asia then display india
if entered India then display Gujarat Rajshthan
if entered Gujarat then display Rajkot
if entered Rajshthan then display Ajmer
if i entered in text box Asia then display india
if entered India then display Gujarat Rajshthan
if entered Gujarat then display Rajkot
if entered Rajshthan then display Ajmer