CODEWITHSUNDEEP
jqueryxml
user357034
user357034

Reputation: 10981

populating a drop down menu with xml file

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>

Upvotes: 5

Views: 32057

Answers (2)

pixeline
pixeline

Reputation: 17984

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

Upvotes: 7

Thomas Clayson
Thomas Clayson

Reputation: 29935

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.

Or in the xml do each "make" like this:

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

and use the ID.

Not sure what you really want though, so don't know if this will help.

Upvotes: 0

Related Questions