ansaurus

Question

populating a drop down menu with xml file

Answer 1

A:

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.

Thomas Clayson 2010-08-14 22:29:28

Well I thought of that but the values are not sequential for instance Dodge can have a value of 300 while Audi can have a value of 13 so it had to pull the value from the xml file for each make

2010-08-14 22:31:48

I'm still not sure what you are trying to do. Are you constantly updating and editing the XML yourself?

Thomas Clayson 2010-08-14 22:38:52

Answer 2

+3 A:

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

pixeline 2010-08-14 22:32:31

That was very simple and worked great!!! Thx!!!

2010-08-14 22:39:20

my pleasure. There is an additional performance trick: you are appending a node on every each() iteration. Since you have many nodes, it's quite costly in terms of performance. It's advised that you store the html in an array, and after the each, join the array and do the append.

pixeline 2010-08-14 22:53:14

updated answer with an implementation of this performance boost.

pixeline 2010-08-14 22:58:02

Yes I can see how that would be better. Instead of lets say in this case 22 appends (one for each loop) there would be only one. So my understanding of this is that each time it "grabs" the node it puts it in the array and then after the loops are finished it then takes the complete array and then appends it. Outstanding!!!

2010-08-14 23:42:52

Only thing is I cannot get the updated code to work, perhaps I am putting in in the wrong place? Syntax error on this line optionsHtml[] = "<option class='ddindent' value='"+ value +"'>"+label+"</option>";

2010-08-14 23:53:43

my mistake: i mixed up php and javascript syntax. optionsHtml.push('<option>...'); should work better. The array declaration should also be like this: var x = new Array();

pixeline 2010-08-15 01:41:32

Worked great thanks for the education. I have another question but I will post a new question. THX again!!

2010-08-15 12:30:49

ansaurus

tags:

views:

answers:

populating a drop down menu with xml file

related questions