0

这是我的 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

现在我想：
如果我在文本框中输入亚洲然后显示印度
如果输入印度然后显示 Gujarat Rajshthan
如果输入 Gujarat 然后显示 Rajkot
如果输入 Rajshthan 然后显示 Ajmer

4

0 回答 0