Problem with dropdownbox length

Question

Hello, I'm creating a javascript method that populates lists depending on a radio button selected previously. As it depends on animals or plants to populate it, my problem comes when I have to populate it after it's already been populated. I mean, the plants dropdownlist has 88 elements, and the animals is 888, when I try to come back from animals to plants, I get some of the animals. I know that my controller method is working properly because it returns the values I select, so the problem is the javascript method. Here is the code:

if(selector == "sOrder")
    alert(document.getElementById(selector).options.length);
for (i = 0; i < document.getElementById(selector).options.length; i++) {
     document.getElementById(selector).remove(i);
}
if (selector == "sOrder")
    alert(document.getElementById(selector).options.length);
document.getElementById(selector).options[0] = new Option("-select-", "0", true, true);

for (i = 1; i <= data.length; i++) {
    document.getElementById(selector).options[i] = new Option(data[i - 1].taxName, data[i - 1].taxRecID);}

Here is the strange thing, when I enter the method I try to erase all the elements of the dropdownlist in order to populate it afterwards. As sOrder is the same selector I had previously selected, I get the elements, the thing is that the first alert I get the proper result, 888, but in the second alert, I should get a 0 right? It shows 444, so when I populate it again it just overrides the first 88 plants and then animals till 444. What am I doing wrong?

Thank you all in advance, Victor

Answer 1

Essentially you are removing from beginning to the end of the list by using the index, but as you do the index of each consecutive item gets decreased. If you remove from the end to the beginning, the indexes remain the same and you can remove them by index.

Replace

for (i = 0; i < document.getElementById(selector).options.length; i++) {
    document.getElementById(selector).remove(i);
}

With

for (i = document.getElementById(selector).options.length -1; i > 0 ; i--) {
    document.getElementById(selector).remove(i);
}

A simpler way of removing all items from a select box might be to use:

document.getElementById(selector).innerHTML="";

This would yank the html inside the select. (note I've only tested this in Firefox 3.6.2 but believe this should work in most modern browsers)

Answer 2

Hi

I think that in the remove loop there is an error

if(selector == "sOrder") alert(document.getElementById(selector).options.length); for (i = 0; i < document.getElementById(selector).options.length; i++) { document.getElementById(selector).remove(i); }

infact while you're removing elements, document.getElementById(selector).options.length changes.

so during the first iteration you have length=888, then you remove an element

during the second iteration you have length=887 (and i=1) etc.

during the 444th iteration, you have i=443 and length=444 and the loop exit after removing the 444th element.