使用 xml 文件填充下拉菜单答案

【问题标题】：populating a drop down menu with xml file使用 xml 文件填充下拉菜单
【发布时间】：2010-08-14 22:23:58
【问题描述】：

我有以下代码正在加载 xml 文件以填充下拉菜单。现在该值等于选项文本，但我希望该值等于来自同一 xml 文件的某个数字。谁能告诉我如何格式化 xml 文件来执行此操作以及添加什么代码以使值出现在 html 代码中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<title>Using jQuery and XML to populate a drop-down box demo</title>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "make.xml",
dataType: "xml",
success: function(xml) {
var select = $('#mySelect');

$(xml).find('dropdown').each(function(){
$(this).find('make').each(function(){
var value = $(this).text();
select.append("<option class='ddindent' value='"+ value +"'>"+value+"</option>");
});
});
select.children(":first").text("Select Make").attr("selected",true);
} //sucess close
}); 
}); 
</script>
</head>
<body>
<div id="page-wrap">
<select id="mySelect">
<option>loading</option>
</select>
</div>
</body>
</html>

这是xml文件

<?xml version="1.0" encoding="iso-8859-1"?>

<dropdown>
<make>Acura</make>
<make>Aston Martin</make>
<make>Audi</make>
<make>Bently</make>
<make>BMW</make>
<make>Buick</make>
<make>Cadillac</make>
<make>Chevrolet</make>
<make>Chrylser</make>
<make>Dodge</make>
<make>Eagle</make>
<make>Ferrari</make>
<make>Ford</make>
<make>Geo</make>
<make>GMC</make>
<make>Honda</make>
<make>Hummer</make>
<make>Hyundai</make>
<make>Infiniti</make>
<make>Isuzu</make>
<make>Jaguar</make>
<make>Jeep</make>
</dropdown>

【问题讨论】：

xml 文件中的数字在哪里？
这是我的问题，我将如何格式化它？

标签： jquery xml

【解决方案1】：

首先，首先将数字放入您的 xml 文件中。如果它们与下拉项相关，我建议作为属性。

示例：

<dropdown>
    <make value="1">Acura</make>
    <make value="4">Aston Martin</make>
    <make value="34">Audi</make>
...
</dropdown>

然后在你的 jquery 循环中：

$(xml).find('dropdown').each(function(){
     $(this).find('make').each(function(){
          var value = $(this).attr('value');
          var label = $(this).text();
          select.append("<option class='ddindent' value='"+ value +"'>"+label+"</option>");
     });
});

请注意，您可能可以像这样简化和加速您的 jquery（未经测试）：

$('make', xml).each(function(){
              var value = $(this).attr('value');
              var label = $(this).text();
              select.append("<option class='ddindent' value='"+ value +"'>"+label+"</option>");
    });

更新

对于另一个重要的性能提升，只执行一个 append() 而不是与“make”节点一样多的 append()。

var optionsHtml = new Array();
    $('make', xml).each(function(){
                  var value = $(this).attr('value');
                  var label = $(this).text();
optionsHtml.push( "<option class='ddindent' value='"+ value +"'>"+label+"</option>");

        });
optionsHtml = optionsHtml.join('');
select.append(optionsHtml);

【讨论】：

我的荣幸。还有一个额外的性能技巧：您在每次 each() 迭代时都附加一个节点。由于您有许多节点，因此在性能方面非常昂贵。建议您将 html 存储在一个数组中，然后在每个数组之后加入数组并进行追加。
更新了答案，实现了这种性能提升。
是的，我知道这样会更好。而不是在这种情况下说22个附加（每个循环一个），只有一个。所以我对此的理解是，每次它“抓取”节点时，它都会将它放入数组中，然后在循环完成后，它会获取完整的数组，然后附加它。优秀！！！
唯一的问题是我无法让更新的代码工作，也许我放错了地方？这一行的语法错误 optionsHtml[] = "";
我的错误：我混淆了 php 和 javascript 语法。 optionsHtml.push('...');应该工作得更好。数组声明也应该是这样的：var x = new Array();

【解决方案2】：

不确定您真正要问的是什么，但您可以做两件事中的一件。

在 javascript 中有一个 count 变量，每次添加选项时都会增加这个变量。使用该数字作为“值”，它将对应于 XML 中的“点”。

或者在 xml 中像这样执行每个“make”：

<make>
    <id>1</id>
    <name>Ford</name>
</make>

并使用 ID。

虽然不确定你真正想要什么，所以不知道这是否会有所帮助。

【讨论】：

嗯，我想到了，但值不是连续的，例如道奇可以有 300 的值，而奥迪可以有 13 的值，所以它必须从每个品牌的 xml 文件中提取值
我仍然不确定您要做什么。您是否经常自己更新和编辑 XML？