repopulating my select

[Davey]

to change the options in my select element
i set options.length to zero then use
y = document.createElement('option');
and add(y,null) in a loop
I'm wondering what happens to all

 

[Davey]

to change the options in my select element
i set options.length to zero then use
y = document.createElement('option');
and add(y,null) in a loop
I'm wondering what happens to all

those option elements ?
should i delete them somehow ?
is this a "memory leak"

 

[Thomas 'PointedEars' Lahn]

to change the options in my select element
i set options.length to zero then use

However, that approach is not supported by any public standard (in W3C DOM
Level 2 HTML the corresponding interface attribute is specified read-only).
You will need a fallback for those cases, probably both a proprietary
(assign `null' to the corresponding NodeList element) and a standards-
compliant one (removeChild()).

y = document.createElement('option');

Use the more compatible 'Option' constructor instead, where available.

and add(y,null) in a loop

That will create a compatibility issue. The add() method is implemented
differently in the MSHTML DOM and in the W3C DOM.

I'm wondering what happens to all those option elements ?
should i delete them somehow ?
is this a "memory leak"

It can turn out to be one. Garbage collection may, or may not, take place
(in time). It is not going to take place in MSHTML as long as there is a
circular reference to the element object (you can assign `null' once you are
done to avoid that).

Please follow the recommendations in <http://jibbering.com/faq/#posting> and
<http://insideoe.com/> (better yet, use a better news client than OE).


PointedEars

 

[Richard Maher]

Hi Davey,

to change the options in my select element
i set options.length to zero then use
y = document.createElement('option');
and add(y,null) in a loop
I'm wondering what happens to all

those option elements ?
should i delete them somehow ?
is this a "memory leak"

I use the following method (I think it was Roedy that showed me and will be
in the archives some where if your interested.)

At load time, when you have an empty list, clone your select then when you
need to tear down the list clone that node again and use replaceChild as
in: -

swapClone = selectClone.cloneNode(true);
selectRef.parentNode.replaceChild(swapClone, selectRef);
selectRef = document.getJobs.jobList;

Seems to work pretty well, and the performance boost over a remove of every
row is astounding!

Cheers Richard Maher (Who is looking more into lists <ul> now FWIW)

 

[JR]

to change the options in my select element
i set options.length to zero then use
y = document.createElement('option');
and add(y,null) in a loop
I'm wondering what happens to all

Some experiments:

function nullOptions(aMenu) {
for (var i = 0; i < aMenu.options.length; i++) {
aMenu.options = null;
}
aMenu.options.length = 0;
}

function fillMenu() {
var aMenu1 = document.forms[0].mySelect,
i, len = myArr.length txt;
for (i = 0; i < len; i++) {
txt = myArr[0];
aMenu1.options = new Option(txt, txt);
}
}

 

[RobG]

Hi Davey,







I use the following method (I think it was Roedy that showed me and will be
in the archives some where if your interested.)

At load time, when you have an empty list, clone your select then when you
need to tear down the list clone that node again and use replaceChild as
in: -

swapClone = selectClone.cloneNode(true);

If an empty list is required, then:

...cloneNode(false)

would be a better choice. It's worth noting that listeners may or may
not be cloned depending on how they were attached and which browser is
being used. This method doesn't break circular references involving
closures that may cause memory leaks, nor other references that may
prevent the nodes being garbage collected (and essentially become
memory leaks).

selectRef.parentNode.replaceChild(swapClone, selectRef);
selectRef = document.getJobs.jobList;

Seems to work pretty well, and the performance boost over a remove of every
row is astounding!

It also fails in some older browsers (about Safari 1.3 I think) but
that may not matter much. Looping over child nodes and removing them
is suitably fast for most cases, e.g. something like:

while (el.lastChild) {
el.removeChild(el.lastChild);
}

which can also be adapted to remove listeners and references if
necessary.

 

[SAM]

Le 10/29/09 9:01 PM, Davey a écrit :

to change the options in my select element
i set options.length to zero then use
y = document.createElement('option');
and add(y,null) in a loop
I'm wondering what happens to all

=============== exercise 1: select reduced to one option

var f = document.forms[0];
f = f.elements['mySelect'];

f.length = 0; // empty select

var o = new Option('aText', 'aValue');
f[f.length] = o;

================ exercise 2: empty and refill a select

var s = []; // s is an array (empty)

var f = document.forms[0].mySelect, n = f.length;
// filling the array with the select's options
while(n--) s[n] = [f.options[n].text, f.options[n].value];

// empty the select
f.length = 0;
// re-fill the select
n = s.length;
while(n--) f[n] = new Option(s[n][0], s[n][1]);

================= exercise 3: copy a select

var S1 = document.forms[0].select1,
n = S1.length;
var S2 = document.createElement('SELECT');
S2.name = 'select2';
while(n--) S2[n] = new Option(S1[n].text, S1[n].value);
document.forms[0].appendChild(S2);

===== variante =======

var S1 = document.forms[0].select1,
S2 = S1.cloneNode(true);
S2.name = 'select3';
document.forms[0].appendChild(S2);

 

[Richard Maher]

Hi Rob,

If an empty list is required, then:

...cloneNode(false)

would be a better choice. It's worth noting that listeners may or may
not be cloned depending on how they were attached and which browser is
being used. This method doesn't break circular references involving
closures that may cause memory leaks, nor other references that may
prevent the nodes being garbage collected (and essentially become
memory leaks).



It also fails in some older browsers (about Safari 1.3 I think) but
that may not matter much. Looping over child nodes and removing them
is suitably fast for most cases,

My experience has been that it is desperately slow in all but the most
trivial of cases. Yes, if you've got 20 options then evrything is easy; if
you've got 2000 rows in a result-set then it is sloooooww.

e.g. something like:

while (el.lastChild) {
el.removeChild(el.lastChild);
}

Sorry, just saw your doing a removeChild rather than and option remove. I've
never done it and will take your word for it.

which can also be adapted to remove listeners and references if
necessary.

Regards Richard Maher

 

[Davey]

----- Original Message -----
From: "SAM" <[email protected]>
Newsgroups: comp.lang.javascript
Sent: Thursday, October 29, 2009 5:26 PM
Subject: Re: repopulating my select

Le 10/29/09 9:01 PM, Davey a écrit :

to change the options in my select element
i set options.length to zero then use
y = document.createElement('option');
and add(y,null) in a loop
I'm wondering what happens to all

=============== exercise 1: select reduced to one option

var f = document.forms[0];
f = f.elements['mySelect'];

f.length = 0; // empty select

var o = new Option('aText', 'aValue');
f[f.length] = o;

alternative==============select reduced to one option
var f = document.forms[0];
f = f.elements['mySelect'];

f.length = 1; // set length to one

f[0].text="aText";
f[0].value="aValue";

================ exercise 2: empty and refill a select

var s = []; // s is an array (empty)

var f = document.forms[0].mySelect, n = f.length;
// filling the array with the select's options
while(n--) s[n] = [f.options[n].text, f.options[n].value];

// empty the select
f.length = 0;
// re-fill the select
n = s.length;
while(n--) f[n] = new Option(s[n][0], s[n][1]);

alternative============== empty and refill a select

var s = []; // s is an array (empty)

var f = document.forms[0].mySelect, n = f.length;
// filling the array with the select's options
while(n--) s[n] = [f[n].text, f[n].value];
// empty the select
f.length = 0;
// re-fill the select
n = s.length;
f.length=n;
while(n--){
f[n].text = s[n][0];
f[n].value = s[n][1];
}

================= exercise 3: copy a select

var S1 = document.forms[0].select1,
n = S1.length;
var S2 = document.createElement('SELECT');
S2.name = 'select2';
while(n--) S2[n] = new Option(S1[n].text, S1[n].value);
document.forms[0].appendChild(S2);

alternative==============copy a selectvar
var S1 = document.forms[0].mySelect,
n = S1.length;
var S2 = document.createElement('SELECT');
S2.name = 'mySelect2';
S2.length = n;
while(n--){
S2[n].text = S1[n].text;
S2[n].value = S1[n].value;
}
document.forms[0].appendChild(S2);

Are these alternatives "bad", what about Gargage Collection ?

They work in all browsers I test with
(ie, firefox and opera on windows and firefox on linux ).