Question

我正在尝试从XML文件填充菜单及其下拉选项。我可以填充菜单，但下拉选项不会显示。

XML：

<dropdown>
    <topo category="Main Opt 1">
        <opcao value="1">Opcao 1</opcao>
        <opcao value="2">Opcao 2</opcao>
        <opcao value="3">Opcao 3</opcao>
        <opcao value="4">Opcao 4</opcao>
    </topo>
    <topo category="Main Opt 2">
    </topo>
</dropdown>

HTML：

<ul class="menu" id="mySelect2">
  <li class="inicio"><a href"#">Inicio</a></li>
</ul>

jQuery的：

$.ajax({
type: "GET",
url: "dados_menu.xml",
dataType: "xml",
success: function(xml) {
var select = $('#mySelect2');
var select1 = $('#mySelect');
var optionsHtml = new Array();
var optionsHtml1 = new Array();
$('topo', xml).each(function(){
    var label = $(this).attr('category');
    optionsHtml.push("<li class='dropdown'> <a href='#' class='dropdown-toggle'>"+label+"<b class='carret'></b></a><ul class='dropdown-menu' id='mySelect'></ul></li>");
    $('opcao', xml).each(function(){
        var label1 = $(this).text();
        optionsHtml1.push( "<li><a href='#' class='ddindent'>"+label1+"</a></li>");
    });
    optionsHtml1 = optionsHtml1.join('');
    select1.append(optionsHtml1);
});
optionsHtml = optionsHtml.join('');
select.append(optionsHtml);
} //sucess close
});

Answer 1

您的主要问题是您使用的$('opcao', xml)应该使用$('opaco', this)。

我建议采用更有条理的方法：

function buildMenuFromXml(xml) {
    $(xml).find('topo').each(function () {
        var category = $(this).attr('category'),
            $menuItem = $("<li class='dropdown'></li>"),
            $submenu = $("<ul class='dropdown-menu'></ul>");

        $(this).find('opcao').each(function () {
            $submenu.append("<li><a href='#' class='ddindent'>" + $(this).text() + "</a></li>");
        });

        $menuItem.append("<a href='#' class='dropdown-toggle'>" + category + "<b class='carret'></b></a>");
        $menuItem.append($submenu);
        $menuItem.appendTo('#mySelect');
    });
}

用法：

$.get("dados_menu.xml").done(buildMenuFromXml);

打开并运行下面的代码段，以便查看它的实际效果。

function buildMenuFromXml(xml) {
    $(xml).find('topo').each(function () {
        var category = $(this).attr('category'),
            $menuItem = $("<li class='dropdown'></li>"),
            $submenu = $("<ul class='dropdown-menu'></ul>");

        $(this).find('opcao').each(function () {
            $submenu.append("<li><a href='#' class='ddindent'>" + $(this).text() + "</a></li>");
        });

        $menuItem.append("<a href='#' class='dropdown-toggle'>" + category + "<b class='carret'></b></a>");
        $menuItem.append($submenu);
        $menuItem.appendTo('#mySelect');
    });
}

// -----------------------------------------------------------

buildMenuFromXml('<dropdown>\
    <topo category="Main Opt 1">\
        <opcao value="1">Opcao 1</opcao>\
        <opcao value="2">Opcao 2</opcao>\
        <opcao value="3">Opcao 3</opcao>\
        <opcao value="4">Opcao 4</opcao>\
    </topo>\
    <topo category="Main Opt 2">\
    </topo>\
</dropdown>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<ul class="menu" id="mySelect"></ul>

注意：

我建议不要使用$(selector, context)。请改用直截了当的$(context).find(selector)方式。
使用$.get()进行简单的GET请求。
尝试使用合理的变量名称。例如，名为<ul>的{{1}}具有误导性。 select和select令人困惑。
对于更复杂的HTML构建任务，请不要使用jQuery，而是让专用的HTML模板库执行此操作。

XML的双重填充菜单和下拉菜单

1 个答案: