How to clear the options array of a HTML Select element?

[weyus]

I have a select element that and I'm trying to clear it's options
array.

I tried

$('school_yearto').options.clear();

but get the error that:

$("school_yearto").options.clear is not a function

I read in the Prototype docs. that:

"Prototype extends all native Javascript arrays with quite a few
powerful methods."

When I use alert() to inspect what $('school_yearto').options is, I
see that it is a HTMLOptionsCollection.

So I'm guessing that this isn't an array. Can you use clear() on
select options successfully, or should I try something else, like
forcing the length of options to 0?

Thanks,
Wes

[kangax]

Try this:

$(selectElement).descendants().each(Element.remove);

or a faster way:

var el = $(selectElement);
while(el.firstChild) {
el.removeChild(el.firstChild);
}

--
kangax

[RobG]

On Aug 24, 10:43 am, kangax <kan...@gmail.com> wrote:
> On Aug 23, 2:37 pm, weyus <we...@att.net> wrote:
> > I have a select element that and I'm trying to clear it's options
> > array.
>

[...]

> Try this:
>
> $(selectElement).descendants().each(Element.remove);
>
> or a faster way:
>
> var el = $(selectElement);
> while(el.firstChild) {
>   el.removeChild(el.firstChild);

Fastest:

selectElement.length = 0;


Note that a select with no options is invalid.

--
Rob

[kangax]

On Aug 24, 8:25 am, RobG <rg...@iinet.net.au> wrote:
> On Aug 24, 10:43 am, kangax <kan...@gmail.com> wrote:
>
> > On Aug 23, 2:37 pm, weyus <we...@att.net> wrote:
> > > I have a select element that and I'm trying to clear it's options
> > > array.
>
> [...]
> > Try this:
>
> > $(selectElement).descendants().each(Element.remove);
>
> > or a faster way:
>
> > var el = $(selectElement);
> > while(el.firstChild) {
> >   el.removeChild(el.firstChild);
>
> Fastest:
>
>   selectElement.length = 0;

Nice : )

--
kangax

[Justin Perkins]

On Sun, Aug 24, 2008 at 7:25 AM, RobG <rg...@iinet.net.au> wrote:
> selectElement.length = 0;

I was going to suggest that last night, but when I tried it out in
Safari to confirm that it worked it did not clear out the options in
the HTML select like I expected, although the JS reference to the
select box was infact cleared.

-justin

[jdalton]

Why not $(selectElement).update();
I tested it in IE, and Firefox and it seems
to work fine.

- JDD

[kangax]

Well, if we are talking about non-standard ways, then what about $
(selectElement).innerHTML = '' ?

--
kangax

[RobG]

Which version of Safari? It certainly works in version 3, I don't
recall any issues with v2.


--
Rob

[Justin Perkins]

On Sun, Aug 24, 2008 at 9:38 PM, RobG <rg...@iinet.net.au> wrote:
> Which version of Safari? It certainly works in version 3, I don't
> recall any issues with v2.

Man, nevermind it works fine :p

Long story short, user error. Using 3.1.2 btw.

-justin

[Matt Foster]

Wouldn't it be, selectElement.options.length = 0;?

[Eric]

Hi,

On Aug 24, 7:39 pm, kangax <kan...@gmail.com> wrote:
> Well, if we are talking about non-standard ways, then what about $
> (selectElement).innerHTML = '' ?

Well, this one is so non-standard that it does not work on IE :o)
This is a known issue described here: http://support.microsoft.com/kb/276228/en-us

However, while it is a little overkill to just clear the list, does
anyone known a solution as fast as this "non-standard" one when we
want to fill a select with many hundreds of options?

(per example in order to get something like the Ajax.autocompleter)

Eric

[RobG]

On Aug 27, 12:14 am, Eric <LeFauv...@gmail.com> wrote:
> Hi,
>
> On Aug 24, 7:39 pm, kangax <kan...@gmail.com> wrote:
>
> > Well, if we are talking about non-standard ways, then what about $
> > (selectElement).innerHTML = '' ?
>
> Well, this one is so non-standard that it does not work on IE :o)
> This is a known issue described here:http://support.microsoft.com/kb/276228/en-us
>
> However, while it is a little overkill to just clear the list, does
> anyone known a solution as fast as this "non-standard" one when we
> want to fill a select with many hundreds of options?

Yes, the one involving length that has been posted twice and is W3C
standards compliant:

HTMLSelectElement length attribute:
<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-5933486 >

or

HTMLOptionsCollection length attribute
<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTMLOptionsCollection-length
>


--
Rob

[Eric]

On Aug 27, 10:37 am, RobG <rg...@iinet.net.au> wrote:
> On Aug 27, 12:14 am, Eric <LeFauv...@gmail.com> wrote:
> > However, while it is a little overkill to just clear the list, does
> > anyone known a solution as fast as this "non-standard" one when we
> > want to fill a select with many hundreds of options?
>
> Yes, the one involving length that has been posted twice and is W3C
> standards compliant:

My question was perhaps a little unclear and I apologize for that.

I did notice that setting the length to 0 was a fast way to clear the
options list.
And I also agree it is a cleaner way than emptying the
select.innerHTML.

My question was about quickly fill the options list with many hundreds
of entries.
This is very fast using innerHTML to replace the select tag with the
result of an ajax call, but my question was:

Is it a way to fill quickly the options list of a select control other
than using innerHTML?

Thanks in advance,
Eric

[RobG]

On Aug 27, 9:08 pm, Eric <LeFauv...@gmail.com> wrote:
> On Aug 27, 10:37 am, RobG <rg...@iinet.net.au> wrote:
>
> > On Aug 27, 12:14 am, Eric <LeFauv...@gmail.com> wrote:
> > > However, while it is a little overkill to just clear the list, does
> > > anyone known a solution as fast as this "non-standard" one when we
> > > want to fill a select with many hundreds of options?
>
> > Yes, the one involving length that has been posted twice and is W3C
> > standards compliant:
>
> My question was perhaps a little unclear and I apologize for that.
>
> I did notice that setting the length to 0 was a fast way to clear the
> options list.
> And I also agree it is a cleaner way than emptying the
> select.innerHTML.
>
> My question was about quickly fill the options list with many hundreds
> of entries.

Ah, I thought you were still asking about removing them.

> This is very fast using innerHTML to replace the select tag with the
> result of an ajax call, but my question was:
>
> Is it a way to fill quickly the options list of a select control other
> than using innerHTML?

DOM operations are pretty quick on some browsers, but innerHTML is
likely fastest overall.

There are various issues regarding formatting the data you send in the
AJAX response, but likely you are already generating HTML on the
server in response to the query so it is probably easier to stick with
that - and if you are completely replacing the innerHTML you don't
have to worry about removing the existing options.


--
Rob

[Eric]

Thanks for all those details Rob.

I would just add for peoples considering this method (using innerHTML
for updating a <SELECT>'s options) that you need to replace the whole
<SELECT> element and not only its options if you want it to work on IE
too (In clear, put your select in a div and update the div's
innerHTML).

Eric