"Clear All" items in a SELECT MULTIPLE box via JavaScript

[Robert Kilroy]

Greetings,

I've been working on this for a few hours now. It seems to be a pretty
simple task but I keep running into "[element] has no properties".

I have a select box defined as follows:

<SELECT MULTIPLE NAME="myOptions[]" SIZE=5>
<OPTION VALUE="Blue">Blue</OPTION>
<OPTION VALUE="Red">Red</OPTION>
<OPTION VALUE="Green">Green</OPTION>
</SELECT>

The options are submitted to a PHP script which takes $myOptions as an
array for parsing.

All I want to do is give the user the ability to clear all of their
selected options. I don't want to actually remove the item from the
list, just de-select it. You get the idea... I've tried every
variation I can think of and I've been searching the web and usenet
for quite some time.

A function like this SHOULD do the job:

function uncheckAll() {
var obj = document.getElementById('myOptions');
for (var i=0; i < obj.options.length; i++) {
obj.options = null;
}
}

But I keep getting told that "obj has no properties" on the "for"
line. I could use checkboxes and there wouldn't be any problems, but
eventually there will be 3 or 4 of these SELECT boxes on the page. I'd
like to keep the layout clean by using them instead of making big
lists of checkboxes.

This seems like a simple thing to do... but after 3+ hours of
searching, and trying many different methods, I'm still hitting a
brick wall. Granted I don't do much JavaScript these days, but I'd
sure like some help. If someone could give me a shove in the right
direction, it'd be appreciated.

- RK -

 

[Lee]

Robert Kilroy said:

Greetings,

I've been working on this for a few hours now. It seems to be a pretty
simple task but I keep running into "[element] has no properties".

I have a select box defined as follows:

<SELECT MULTIPLE NAME="myOptions[]" SIZE=5>
<OPTION VALUE="Blue">Blue</OPTION>
<OPTION VALUE="Red">Red</OPTION>
<OPTION VALUE="Green">Green</OPTION>
</SELECT>

The options are submitted to a PHP script which takes $myOptions as an
array for parsing.

All I want to do is give the user the ability to clear all of their
selected options. I don't want to actually remove the item from the
list, just de-select it. You get the idea... I've tried every
variation I can think of and I've been searching the web and usenet
for quite some time.

A function like this SHOULD do the job:

function uncheckAll() {
var obj = document.getElementById('myOptions');
for (var i=0; i < obj.options.length; i++) {
obj.options = null;
}
}

But I keep getting told that "obj has no properties"

You gave it the name "myOptions[]".
You didn't give it any id at all.
Why are you expecting document.getElementById('myOptions') to find it?
Give it an id, if you want to use getElementById().

See also:
http://www.jibbering.com/faq/#FAQ4_25


--

 

[Robert Kilroy]

Ahhh! The one thing I didn't try... putting the brackets in as part of
the variable. I guess I assumed that MULTPLIE SELECTs were arrays by
default.

This function works in Firefox and IE6:

function uncheckAll() {
var obj = document.frmlisting.elements["myOptions[]"];
for (var loop=0; loop < obj.options.length; loop++) {
obj.options[loop].selected = false;
}
}

That's what I get for not keeping up with my JavaScript I guess...
Thanks!

(And yes, the Javascript FAQ is bookmarked)

 

[ASM]

Robert Kilroy a écrit :

function uncheckAll() {
var obj = document.getElementById('myOptions');
for (var i=0; i < obj.options.length; i++) {
obj.options = null;

obj.options.selected = false;

}
}

But I keep getting told that "obj has no properties"

yes that right ...
which property do you see in obj.options ?
or : could options be a property of obj ?

obj.options.text
obj.options.value
obj.options.selected
obj.options.id
obj.options.style
...