用xml文件填充下拉菜单 [英] populating a drop down menu with xml file
问题描述
我有以下代码正在加载xml文件以填充下拉菜单.现在，该值等于选项文本，但我希望该值等于来自相同xml文件的某个数字.有人可以告诉我如何格式化xml文件来执行此操作，以及添加哪些代码以使值显示在html代码中.
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.
<!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文件中. 如果它们与下拉菜单项相关，则建议将其作为属性.
First, start by putting the numbers in your xml file. If they are related to the dropdown item, i suggest as an attribute.
示例:
<dropdown>
<make value="1">Acura</make>
<make value="4">Aston Martin</make>
<make value="34">Audi</make>
...
</dropdown>
然后在您的jquery循环中:
then in your jquery loop:
$(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的速度:
Note that you could probably simplify and speed up your jquery like this (untested):
$('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().
For another, important, performance boost, do only one append() instead of as many append() as you have "make" nodes.
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);
这篇关于用xml文件填充下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
