Menu
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>
This is the xml file
<?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>
655
First, start by putting the numbers in your xml file. If they are related to the dropdown item, i suggest as an attribute.
example:
<dropdown>
<make value="1">Acura</make>
<make value="4">Aston Martin</make>
<make value="34">Audi</make>
...
</dropdown>
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>");
});
});
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>");
});
UPDATE
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
