用xml文件填充下拉菜單

我有下面的代碼加載一個xml文件來填充下拉菜單。現在，該值等於選項文本，但我希望該值等於來自同一個xml文件的某個數字。有人可以告訴我如何格式化XML文件來做到這一點，以及添加什麼代碼來使值出現在HTML代碼中。用xml文件填充下拉菜單

<!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>

來源

2010-08-14 user357034

你在xml文件中的數字在哪裏？ – pixeline 2010-08-14 22:27:42

這是我的問題，我將如何格式化它？ – user357034 2010-08-14 22:32:32

首先，把數字放在你的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>"); 
    });

UPDATE

對於另一個重要的性能提升，只需要一個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);

來源

2010-08-14 22:32:31 pixeline

這很簡單，工作很棒！謝謝！！！ – user357034 2010-08-14 22:39:20

我的榮幸。還有一個額外的性能技巧：每個each（）迭代都附加一個節點。由於您有許多節點，因此性能相當高昂。建議您將html存儲在數組中，並在每個數組後面加入數組並進行附加操作。 – pixeline 2010-08-14 22:53:14

更新的答案與此性能提升的實現。 – pixeline 2010-08-14 22:58:02

不知道真的是你要求的，但你可以做的1兩件事情。

在javascript中有一個count變量，每次添加選項時都會增加此變量。使用該數字作爲「值」，它將對應於XML中的「點」。

還是在XML做每一個「讓」是這樣的：

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

，並使用ID。

不知道你真的想要什麼，所以不知道這是否會有所幫助。

來源

2010-08-14 22:29:28

嗯，我想到了，但價值觀並非順序，例如道奇可以有300的價值，而奧迪可以有13的價值，所以它不得不從每個品牌的XML文件中提取價值 – user357034 2010-08-14 22:31:48

我還不確定你正在嘗試做什麼。你是否在不斷更新和編輯XML？ – 2010-08-14 22:38:52

用xml文件填充下拉菜單

回答

相關問題