这是我的xml文件: -
<root>
<child1 entity_id = "1" value= "Asia">
<child2 entity_id = "2" value = "india">
<child3 entity_id = "3" value = "Gujarat">
<child5 entity_id = "5" value ="Rajkot"></child5>
</child3>
<child4 entity_id = "4" value = "Rajshthan">
<child6 entity_id = "6" value = "Ajmer"></child6>
</child4>
</child2>
</child1>
</root>
这是我的代码: -
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Region Value</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
data = 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 = 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="Search" onclick="loadChild()" >
<p>
<div id='update-target'>
<a href="#">Click here to load value</a>
<ol id="0"></ol>
</div>
</p>
</body>
</html>
这是我的输出:
__________________(Textbox)
search(button)
Click here to load value:
Asia
india
Gujarat
Rajkot
Rajshthan
Ajmer
现在我想:如果我进入亚洲文本框然后显示印度,如果进入印度然后显示古吉拉特邦Rajshthan
如果进入古吉拉特邦然后显示Rajkot
如果进入Rajshthan然后显示Ajmer