jQuery 使用 xml 文件填充下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3485359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
populating a drop down menu with xml file
提问by user357034
I have the following code which is loading an xml file to populate a dropdown menu. Right now the value equals the option text but I would like to have the value equal to some number which comes from the same xml file. Can someone tell me how to format the xml file to do this and what code to add to make the value appear in the html code.
我有以下代码正在加载一个 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>
This is the xml file
这是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>
回答by pixeline
First, start by putting the numbers in your xml file. If they are related to the dropdown item, i suggest as an attribute.
首先，首先将数字放入您的 xml 文件中。如果它们与下拉项有关，我建议作为一个属性。
example:
例子：
<dropdown>
<make value="1">Acura</make>
<make value="4">Aston Martin</make>
<make value="34">Audi</make>
...
</dropdown>
then in your jquery loop:
然后在你的 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>");
});
});
Note that you could probably simplify and speed up your jquery like this (untested):
请注意，您可能可以像这样简化和加速您的 jquery（未经测试）：
$('make', xml).each(function(){
var value = $(this).attr('value');
var label = $(this).text();
select.append("<option class='ddindent' value='"+ value +"'>"+label+"</option>");
});
UPDATE
更新
For another, important, performance boost, do only one append() instead of as many append() as you have "make" nodes.
对于另一个重要的性能提升，只执行一个 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);
回答by Thomas Clayson
Not sure really what you are asking, but you could do 1 of two things.
不确定你在问什么，但你可以做两件事之一。
Have a count variable in the javascript and everytime you add an option increment this variable. Use that number as the "value" and it will correspond to its "point" in the XML.
在 javascript 中有一个计数变量，每次添加选项时都会增加这个变量。使用该数字作为“值”，它将对应于它在 XML 中的“点”。
Or in the xml do each "make" like this:
或者在 xml 中做每个“制作”这样的：
<make>
<id>1</id>
<name>Ford</name>
</make>
and use the ID.
并使用该 ID。
Not sure what you really want though, so don't know if this will help.
不确定你真正想要什么，所以不知道这是否有帮助。
