hide and/or sort OPTGROUP using javascript

[TKapler]

I think i am quite experienced javascript programmer, but I got a
problem.
I have a selectbox with e.g. 17 optgroups with 100 options.
I need a javascript code to hide some of that optgroups (i can give
each optgroup individual ID, e.g. id="group1"..."group"17).
e.g. the html code looks like:
<select name="mySelect" id="mySelect">
<optgroup label="First group" id="group1" >
<option value="a" >
Item A
</option>
<option value="b" >
Item B
</option>
</optgroup>
<optgroup label="Second group" id="group2" >
<option value="a" >
Item A
</option>
<option value="b" >
Item B
</option>
</optgroup>
</select>

The problem is, that no code i was able in last 3 hours invent works. I
tried e.g.
document.getElementById("group1").className="hidde n"; //style .hidden
{display:none}
document.getElementById("group1").style.display=no ne;
and many other variants. I can easily hide this way the whole select,
in FF i can hide also option, but i can never hide the whole group.

If this is a "feature" and there is no sollution, you may help me to
find something different - i need javascript code to move one whole
optgroup to the beggining of the list. Or (this may be the sollution
for the first problem): get one group and make a new selectbox just
after the first one (and then i would hide the first).

P.S.: i do not want ajax lists, just some easy client side sollution

[ulrich.kautz]

TKapler wrote:

I think i am quite experienced javascript programmer, but I got a
problem.
I have a selectbox with e.g. 17 optgroups with 100 options.
I need a javascript code to hide some of that optgroups (i can give
each optgroup individual ID, e.g. id="group1"..."group"17).
e.g. the html code looks like:
<select name="mySelect" id="mySelect">
<optgroup label="First group" id="group1" >
<option value="a" >
Item A
</option>
<option value="b" >
Item B
</option>
</optgroup>
<optgroup label="Second group" id="group2" >
<option value="a" >
Item A
</option>
<option value="b" >
Item B
</option>
</optgroup>
</select>

The problem is, that no code i was able in last 3 hours invent works. I
tried e.g.
document.getElementById("group1").className="hidde n"; //style .hidden
{display:none}
document.getElementById("group1").style.display=no ne;
and many other variants. I can easily hide this way the whole select,
in FF i can hide also option, but i can never hide the whole group.

If this is a "feature" and there is no sollution, you may help me to
find something different - i need javascript code to move one whole
optgroup to the beggining of the list. Or (this may be the sollution
for the first problem): get one group and make a new selectbox just
after the first one (and then i would hide the first).

P.S.: i do not want ajax lists, just some easy client side sollution

Hello TKapler,

here is a quick & dirty solution. Ive tried your display thing, but i
didnt work on my, either. Next step was some funny {position=
'absolute'; visibility= 'hidden'}, but no luck in IEX so far (FF did it
;)).
so, the only thing remains (as far as i know) would be dom-removal. i
dont know your your envirmonent, but it should work on you
(select-status stays fine).

So, here it is, tested on IEX v6.0.2 and FF v1.5.0.5 :

// -- after removal, 'groupX' cant be accesed via getElementById .. so
we store it globally
var hNodeCache= {};

function toggle(sNodeId) {
// -- first call, store node in cache for later usage
if (!hNodeCache[sNodeId]) {
hNodeCache[sNodeId]= document.getElementById(sNodeId);
hNodeCache[sNodeId]._nextNode= hNodeCache[sNodeId].nextSibling;
}
var n= hNodeCache[sNodeId], m= document.getElementById('mySelect');

if (n.parentNode && n.parentNode.nodeType== 1) // -- wipe it! nodeType
check for iex, cause he thinks #document-fragment or some is a "real"
(parent)node, how silly
n.parentNode.removeChild(n);
else {
var nn= n._nextNode; // -- we cant insertBefore a child, which is
currently not there, get the next!
while (nn && (!nn.parentNode || nn.parentNode.nodeType!= 1)) nn=
nn._nextNode;

if (nn) m.insertBefore(n, nn); // -- somewhere, but not last
else m.appendChild(n); // -- is last
}
}
The call would be:
<a href="javascript:toggle('group1')">toggle optgroup 1</a>

In the example above, ive inited the hNodeCache elements on-the-fly,
when needed. Probably, its a lot better to pre-init them, maybe onload
or some.. In this case, you could also get rid of these hundreds ids,
but as mentioned, i dont know your envirmonent...

good luck
Ulrich