html - AJAX，从 XML 文件填充下拉菜单

Question

我正在做一个项目，但我不确定下一步该做什么。我的目标是用 xml 文件填充下拉菜单。菜单基于 4 个步骤。“Fylke”“Kommune”“Kategori”“Dato”。现在，我通过下面的示例获取 xml 以将数据提供给“Fylke”。下一步是当用户从“Fylke”菜单中选择 Akershus 时，用 Halden 填充“Kommune”。

这是 XML：

<arrangement>
   <fylke name="Akershus">
   <kommune name="Halden">
   <arrangement id="570215856">
   <kategori>Moro</kategori>
   <dato>2013-10-10</dato>
</arrangement>

这是脚本：（目前正在将“fylke”输入菜单。）

 $(document).ready( function() {
arrangementer();
 fetch();
 });

 /*function fetch() {

 setTimeout( function() {
    arrangementer();
    fetch();
   }, 100);

   }*/

   function arrangementer() {

   $.ajax({ 

    url: "arrangementer.xml",
    dataType: "xml",
    success: function(data) {

        $('ul').children().remove();

        $(data).find("arrangement fylke").each( function() {

            var info = '<a href="#">'+$(this).attr("name")+'</a>';

            $('ul').append(info);

        });

    },
    error: function() { $('ul').children().remove(); 
        $('ul').append("<li>There was an error!</li>"); }
}); 
}

Answer 1

你在用jquery吗？

如果是这样你需要在外层ul上附加一个点击事件，这可以在ready函数中完成

$( "ul li" ).click(function() {
  alert( "Handler for .click() called." );
});

http://api.jquery.com/click/

您当前没有将 li 项添加到您的 ul中 jQuery：如何在现有的 <ul> 中添加 <li>？

您确实需要为要更新的元素提供 ID，以便您可以使用

$(" #myid li ").append(info);

否则，您将向表单http://api.jquery.com/id-selector/上的所有 ul 元素添加信息

Answer 2

不确定我是否解决了您的问题，但希望这会有所帮助：

$(xml).find("arrangement fylke").each( function(i) {
    var info = '<a href="#" nodeno="'+i+'" >'+$(this).attr("name")+'</a>'; //attribute nodeno added, carries the number of the node you will need later
    $('ul').append(info); 
});

$('ul').on("click", function(e){ //when clicked on one of those elements
    var nodeno = $(e.target).attr("nodeno"); //get nodeno attribute from clicked object
    $(xml)[nodeno].find("arrangement kommune").each( function(i){ //get the node by id and...
        var info = '<a href="#" nodeno="'+i+'" >'+$(this).attr("name")+'</a>';
        $('#menuitem2').append(info); //...populate your submenu with the kommune object
    } );
});

编辑：一点解释

这将导致 fylke 链接，例如：

<a href="#" nodeno="0">Fylke 1</a>
<a href="#" nodeno="1">Fylke 2</a>

单击其中一个时，您只需从单击的元素中读取 nodeno 属性并使用它从您的 xml 中获取相应的节点。那么您只使用该节点中的 kommune 来填充下一个菜单级别。

希望我解决了你的问题，这会有所帮助