Clear Elements in Select Menu

[trope]

Does anyone have the code to clear all of the elements in a select
menu?

I've been having trouble with this following code:
for (var i=0; i< 100; i++)
document.addskill.cat2.options[i] = null;

because it doesn't clear the elements.

Thanks for your help.
Dustin

[web.dev]

Hi Dustin,

Try this on for size:

for(var i = 0; i < 100; i++)
{
document.addskill.cat2.remove(0);
}

You might ask why are we continuously removing an element from index 0.
That is because once you remove, all the other elements move down. So
you have to keep removing from index 0.

Hope this helps. :)

[Mick White]

trope wrote:

Does anyone have the code to clear all of the elements in a select
menu?

I've been having trouble with this following code:
for (var i=0; i< 100; i++)
document.addskill.cat2.options[i] = null;

because it doesn't clear the elements.

document.addskill.cat2.options.length=0
Mick

[RobG]

trope wrote:

Does anyone have the code to clear all of the elements in a select
menu?

I've been having trouble with this following code:
for (var i=0; i< 100; i++)
document.addskill.cat2.options[i] = null;

because it doesn't clear the elements.

'clear'? You can remove all the options by setting the length of the
select to zero (no loop required):

document.addskill.cat2.length = 0;

If you want set the value or text of the option to '' then you have
to do that for each option:

for (var i=0; i< 100; i++){
document.addskill.cat2.options[i].text = '';
document.addskill.cat2.options[i].value = '';
...
}
--
Rob

[bmgz]

web.dev wrote:

That is because once you remove, all the other elements move down. So
you have to keep removing from index 0.

Thanks alot, I spent the most part of a day on friday trying to debug a
script, simply because I did not know this!

I finally managed to get it done by looping backwards through the
options array (i--). However, your suggestion is definately more elegant..

[Jeff]

Use the MS Script Editor included free with MS Office 2002 and above,
for debugging Internet Explorer (IE).

This subject is of great interest to many JS developers, as there is no
obvious, low cost way to do sophisticated debugging in
IE6 other than to use the debugger described below, which is horribly
documented otherwise. I feel debugging is an important aspect of
projecting the useability of the language and needs to be made more
clear for new users.
Jeff Papineau
yo**@mandala.com
<FAQENTRY>

This is a page that describes how to install and use the MS Script
Editor to debug Javascript in Internet Explorer ( IE ). It has a
powerful debugger built into it that works really well for developers
supporting IE5+. This debugger/editor included with most versions of
Microsoft Office.

http://www.mandala.com/javascript/debug_javascript.html

..NET programmers may have better tools (VStudio) but this comes in
really handy for anyone developing with JSP and PHP and other dynamic
scripting languages which embed javascript, as well as any HTML page
using Javascript in Internet Explorer that needs a (almost) free
debugging environment.

</FAQENTRY>
trope wrote:

Does anyone have the code to clear all of the elements in a select
menu?

I've been having trouble with this following code:
for (var i=0; i< 100; i++)
document.addskill.cat2.options[i] = null;

because it doesn't clear the elements.

Thanks for your help.
Dustin

[Thomas 'PointedEars' Lahn]

Mick White wrote:

trope wrote:

Does anyone have the code to clear all of the elements in a select
menu?

I've been having trouble with this following code:
for (var i=0; i< 100; i++)
document.addskill.cat2.options[i] = null;

because it doesn't clear the elements.

document.addskill.cat2.options.length=0

Does not work in all cases, therefore my dhtml.js, version 0.9.2005050817,
contains

/**
* Removes all options from a HTMLSelectElement object.
*
* @author
* (C) 2003 Thomas Lahn &lt;dh******@PointedEars.de&gt;
* @partof
* http://pointedears.de/scripts/dhtml.js
* @param oSelect : HTMLSelectElement
* Reference to a HTMLSelectElement object.
* @param bAllowReload : boolean
* If <code>true</code>, reloads the document.
* @return type boolean
* <code>true</code> if successful, <code>false</code>
* otherwise.
*/
function removeOptions(oSelect, bAllowReload)
{
if (oSelect
&& oSelect.tagName
&& oSelect.tagName.toLowerCase() == "select")
{
var o = oSelect.options;
if (o && o.length)
{
// shortcut if "length" property is not read-only
o.length = 0;
while (o.length > 0)
{
if (o.remove)
{
o.remove(o.length - 1);
}
else
{
o[o.length - 1] = null;
if (bAllowReload)
{
history.go(0);
}
}
}
return true;
}
}

return false;
}

Note that the remove() method suggested in
<11*********************@g49g2000cwa.googlegroups. com>
presents a proprietary approach (IE only AFAIK) which
therefore must be feature-tested before.
PointedEars