Home/ Questions/Q 994095
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T06:31:40+00:00

I have the following code which is loading an xml file to populate a

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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