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

我试图填充一个菜单，它是XML文件中的下拉选项。 我可以填充菜单，但下拉选项不显示

XML:

Opcao 1
Opcao 2
Opcao 3
Opcao 4

HTML:

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
}); 

$.ajax({
键入：“获取”，
url:“dados_menu.xml”，
数据类型：“xml”，
成功：函数（xml）{
var select=$（“#mySelect2”）；
var select1=$（“#mySelect”）；
var optionsHtml=新数组（）；
var optionsHtml1=新数组（）；
$（'topo'，xml）{
var label=$（this.attr（'category'）；
选项html.push（“
”；
$（'opcao'，xml）.each（函数（）{
var label1=$（this.text（）；
选项HTML1.push（“
”）；
});
optionsHtml1=optionsHtml1.join（“”）；
选择1.追加（选项HTML1）；
});
optionsHtml=optionsHtml.join（“”）；
选择。追加（选项HTML）；
}//成功关闭
}); 

您的主要问题是在应该使用

$（'opcao'，xml）

的地方使用

$（'opaco'，this）

我建议采用更结构化的方法：

函数buildMenuFromXml（xml）{
$（xml）.find（'topo'）.each（函数（）{
var category=$（this.attr（'category'），
$menuItem=$（“
”），
$子菜单=$（“
”；
$（this.find（'opcao'）。每个（函数（）{
$submenu.append（“
”）；
});
$menuItem.append（“”）；
$menuItem.append（$submenu）；
$menuItem.appendTo（“#mySelect”）；
});
}

用法：

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

打开并运行下面的代码段以查看它的运行情况

函数buildMenuFromXml（xml）{
$（xml）.find（'topo'）.each（函数（）{
var category=$（this.attr（'category'），
$menuItem=$（“
”），
$子菜单=$（“
”；
$（this.find（'opcao'）。每个（函数（）{
$submenu.append（“
”）；
});
$menuItem.append（“”）；
$menuItem.append（$submenu）；
$menuItem.appendTo（“#mySelect”）；
});
}
// -----------------------------------------------------------
buildMenuFromXml（'\
\
Opcao 1\
Opcao 2\
Opcao 3\
Opcao 4\
\
\
\
');

实施了推荐的3种最佳实践。我现在明白为什么我应该使用HTML模板库了。谢谢你的时间和笔记。
$.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
}); 

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