用XML文件填充下拉菜单。

Question

用XML文件填充下拉菜单。

5

我有以下代码，它正在加载一个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>

- user357034

你的数字在 XML 文件中的哪里？ - pixeline

这是我的问题，我该如何格式化它？ - user357034

2个回答

0

不太确定您的问题是什么，但您可以有两种选择。

在JavaScript中设置一个计数变量，并在每次添加选项时递增此变量。使用该数字作为“值”，它将对应于XML中的“点”。

或者在XML中像这样处理每个“制造商”：

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

并使用ID。

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

- Thomas Clayson

我曾考虑过这个问题，但是数值不是连续的。例如，Dodge 可能有一个值为 300，而 Audi 可能只有一个值为 13，因此必须从 XML 文件中为每个品牌提取值。 - user357034

我仍然不确定你想要做什么。你是在不断更新和编辑XML吗？ - Thomas Clayson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pixeline · Accepted Answer

首先，在您的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);