JavaScript. Problem with getElementsByTagName() and IE5.5

[Peter X]

Hi all,

First appolgies for posting a mostly IE5.5 question here, but the IE5.5
groups are a bit dead these days. Hopefully someone here can help me!

I'm using <optgroup> tags with <select> and <option> to group related
options, e.g.:

<select name="myselect">
<optgroup label="first group">
<option>one</option>
<option>two</option>
</optgroup>
<optgroup label="second group">
<option>three</option>
<option>four</option>
</optgroup>
</select>

but as we know, older browsers won't show the group names so anything
before IE6 wont' show. So I wrote the following script:

function fixOptgroup() {
var optGroups, optGroup, newOption, newOptionText;
optGroups = document.getElementsByTagName("optgroup");
for(var i=0; i<optGroups.length; i++) {
optGroup = optGroups;
newOption = document.createElement("option");
newOption.setAttribute("value", "");
newOption.setAttribute("class", "optgroup");
newOptionText = document.createTextNode(
optGroup.getAttribute("label") );
newOption.appendChild(newOptionText);
optGroup.insertBefore(newOption, optGroup.firstChild);
}
}

which finds all the "optgroup" elements, and inserts a new "select" as
the first child. It works fine in IE6** (and Mozilla) but I don't need
it to work there!

It fails in IE5.5 though saying "Unexpected call to method or property
access". As far as I can tell, this is because although
getElementsByTagName has retrieved a reference to the "optgroup" tags,
the firstChild property of all of these is null!

Does anyone have any ideas on how I should proceed?!

Thanks in advance!

Peter.

** [obviously in live use this code would only be called after browser
sniffing first]

 

[doug]

-----Original Message-----
Hi all,

First appolgies for posting a mostly IE5.5 question here, but the IE5.5
groups are a bit dead these days. Hopefully someone here can help me!

I'm using <optgroup> tags with <select> and <option> to group related
options, e.g.:

<select name="myselect">
<optgroup label="first group">
<option>one</option>
<option>two</option>
</optgroup>
<optgroup label="second group">
<option>three</option>
<option>four</option>
</optgroup>
</select>

but as we know, older browsers won't show the group names so anything
before IE6 wont' show. So I wrote the following script:

function fixOptgroup() {
var optGroups, optGroup, newOption, newOptionText;
optGroups = document.getElementsByTagName ("optgroup");
for(var i=0; i<optGroups.length; i++) {
optGroup = optGroups;
newOption = document.createElement("option");
newOption.setAttribute("value", "");
newOption.setAttribute("class", "optgroup");
newOptionText = document.createTextNode(
optGroup.getAttribute("label") );
newOption.appendChild(newOptionText);
optGroup.insertBefore(newOption, optGroup.firstChild);
}
}

which finds all the "optgroup" elements, and inserts a new "select" as
the first child. It works fine in IE6** (and Mozilla) but I don't need
it to work there!

It fails in IE5.5 though saying "Unexpected call to method or property
access". As far as I can tell, this is because although
getElementsByTagName has retrieved a reference to the "optgroup" tags,
the firstChild property of all of these is null!

Does anyone have any ideas on how I should proceed?!

Thanks in advance!

Peter.

** [obviously in live use this code would only be called after browser
sniffing first]

.
Don't feel bad about 5.0 because I'm seriously thinking

about going back to 5.0 or 5.1..----6.0 sp1 has been a
serious pain all over the backside ya know. Why are you
changing scripts though? If you can mention what you are
trying to accomplish there is most likely an eaier way of
doing this.

 

[Peter X]

-----Original Message-----
Hi all,

First appolgies for posting a mostly IE5.5 question here,

but the IE5.5

groups are a bit dead these days. Hopefully someone here

can help me!

I'm using <optgroup> tags with <select> and <option> to

group related

options, e.g.:

<select name="myselect">
<optgroup label="first group">
<option>one</option>
<option>two</option>
</optgroup>
<optgroup label="second group">
<option>three</option>
<option>four</option>
</optgroup>
</select>

but as we know, older browsers won't show the group names

so anything

before IE6 wont' show. So I wrote the following script:

function fixOptgroup() {
var optGroups, optGroup, newOption, newOptionText;
optGroups = document.getElementsByTagName
("optgroup");

for(var i=0; i<optGroups.length; i++) {
optGroup = optGroups;
newOption = document.createElement("option");
newOption.setAttribute("value", "");
newOption.setAttribute("class", "optgroup");
newOptionText = document.createTextNode(
optGroup.getAttribute("label") );
newOption.appendChild(newOptionText);
optGroup.insertBefore(newOption,
optGroup.firstChild);

}
}

which finds all the "optgroup" elements, and inserts a

new "select" as

the first child. It works fine in IE6** (and Mozilla) but

I don't need

it to work there!

It fails in IE5.5 though saying "Unexpected call to

method or property

access". As far as I can tell, this is because although
getElementsByTagName has retrieved a reference to

the "optgroup" tags,

the firstChild property of all of these is null!

Does anyone have any ideas on how I should proceed?!

Thanks in advance!

Peter.

** [obviously in live use this code would only be called

after browser

sniffing first]

.
Don't feel bad about 5.0 because I'm seriously thinking

about going back to 5.0 or 5.1..----6.0 sp1 has been a
serious pain all over the backside ya know. Why are you
changing scripts though? If you can mention what you are
trying to accomplish there is most likely an eaier way of
doing this.

Hi Doug,

All I'm trying to do is use the <optgroup> tag to group <option>s in a
<select>! <optgroup> works fine in newer browsers including IE6, but in
older browsers, the group names do not appear since the optgroup tag is
not recognised.

The script that I'm using is supposed to search the Dom for optgroup
tags, and insert dummy option elements named the same as the invisible
optgroup tags.

I could simply use all option tags and no optgroup tags right from the
start and that would work with all browsers, but the benefit of optgroup
is that it visually shows grouping of select options, without the group
labels being selectable themselves!

Its not a massively big deal, but (1). it would be nice to use the newer
HTML elements as it should improve accessability and, (2). I thought it
would be easy to write the JavaScript to make the newer markup work with
older browsers!

Cheers!

Peter.