Question

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

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

Answer 2

不确定你在问什么，但你可以做两件事中的一件。

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

或者在xml中，每个“make”都是这样的：

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

并使用ID。

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

使用xml文件填充下拉菜单

2 个答案: