getElementById does not work on optgroup in IE 7?

[jhappeal]

I do not know Javascript that well so I might be going about this the wrong way. Any help would be appreciated.

This function attempts to hide the options inside of the optgroup tag of the second select box based on the user selected option of the first select box. It works fine in Mozilla but IE7 still shows all the optgroups in the second select box. The idea is to show the appropriate list of states based on what country a user selects without reloading the page.

You can see a sample of the form here:
http://www.allacparts. com/testjs.php

The optgroup tags have an id of ctyCAN and ctyUSA.

<script type="text/javascript">
<!--
function showhideship() {
 
if (document.getElementById('country').value == "") {
 
document.getElementById('statewrap').style.display = "none";
document.getElementById('zipcodewrap').style.display = "none";
document.getElementById('stateotherwrap').style.display = "none";
document.getElementById('countryotherwrap').style.display = "none";
 
}
else if (document.getElementById('country').value == "223") {
 
document.getElementById('statewrap').style.display = "block";
document.getElementById('ctyCAN').style.display = "none";
document.getElementById('ctyUSA').style.display = "block";
document.getElementById('zipcodewrap').style.display = "block";
document.getElementById('stateotherwrap').style.display = "none";
document.getElementById('countryotherwrap').style.display = "none";
 
}
else if (document.getElementById('country').value == "38") {
 
document.getElementById('statewrap').style.display = "block";
document.getElementById('ctyCAN').style.display = "block";
document.getElementById('ctyUSA').style.display = "none";
document.getElementById('zipcodewrap').style.display = "block";
document.getElementById('stateotherwrap').style.display = "none";
document.getElementById('countryotherwrap').style.display = "none";
 
}
else if (document.getElementById('country').value == "other") {
 
document.getElementById('statewrap').style.display = "none";
document.getElementById('zipcodewrap').style.display = "block";
document.getElementById('stateotherwrap').style.display = "block";
document.getElementById('countryotherwrap').style.display = "block";
 
}
else {
 
document.getElementById('statewrap').style.display = "block";
document.getElementById('zipcodewrap').style.display = "block";
document.getElementById('stateotherwrap').style.display = "block";
document.getElementById('countryotherwrap').style.display = "block";
 
}
 
}
//-->
</script>
 

Thanks

[leoiser]

Hi Yaar,
Use '' instead of 'block'

Example
***************
document.getEle mentById('ctyUS A').style.displ ay = "block";

Instead of above code
document.getEle mentById('ctyUS A').style.displ ay = "";

:) Thanks

[mrhoo]

Most browsers consider the options in an optgroup its child nodes,
so you can toggle the optgroup itself:

document.getEle mentById('optgr oup_2').style.d isplay='none'
//hide the group including the label;
document.getEle mentById('optgr oup_2').style.d isplay=''
// '' will remove the 'none' and show the group;


With IE you have to rearrange the furniture-

[code=javascript]var who=document.ge tElementById('o ptgroup_2');
var s=who.innerHTML ;
s=s.replace(/<option /ig,'<option style="display: none" ');
who.innerHTML=s ;
//its a lot more work if the options have any inline style already
//so I'm assuming they don't
[code]


And removing the display:none is just as much fun.
I wouldn't bother, but its up to you.

[mrhoo]

//late edit, sorry, fumbling with the [code] tags.

Most browsers consider the options in an optgroup its child nodes,
so you can toggle the optgroup itself:

var who=document.getElementById('optgroup_2');
who.style.display= 'none';

and who.style.displ ay= '';
will remove the 'none' and show the group normally;

With IE you have to rearrange the furniture-

var who=document.getElementById('optgroup_2');
var s=who.innerHTML;
s=s.replace(/<option /ig,'<option style="display:none" ');
who.innerHTML=s;

This leaves the optgroup label visible,
but setting its display to none in the innerHTML in IE hides the whole select menu. its a lot more work if the options have any inline style already so I'm assuming they don't.

And removing the display:none is just as much fun.
I wouldn't bother, but its up to you.

[jhappeal]

Thanks Mrhoo the code was perfect for hiding the elements but now I have a problem restoring the optgroup if the user changes their country after the initial selection.

Currently I am using the code below (which works in Mozilla)

<script type="text/javascript">
<!--
function showhideship() {
 
var CAN=document.getElementById('ctyCAN');
var CANi=CAN.innerHTML;
CANhide=CANi.replace(/<option /ig,'<option style="display:none" ');
CANshow=CANi.replace(/<option /ig,'<option style="display:block" ');
 
var USA=document.getElementById('ctyUSA');
var USAi=USA.innerHTML;
USAhide=USAi.replace(/<option /ig,'<option style="display:none" ');
USAshow=USAi.replace(/<option /ig,'<option style="display:block" ');
 
 
if (document.getElementById('country').value == "223") {
CAN.innerHTML=CANhide;
USA.innerHTML=USAshow;
}
else if (document.getElementById('country').value == "38") {
CAN.innerHTML=CANshow;
USA.innerHTML=USAhide;
}
 
else {
CAN.innerHTML=CANshow;
USA.innerHTML=USAshow;
}
 
}
//-->
</script>
 

I have been playing with the code for hours and can not get it to work in IE 7. It does not display any options for the second select box. Any ideas would be appreciated.

I upload a new sample of the form:
http://www.allacparts. com/testjs2.php

[mrhoo]

USAhide=USAi.replace(/<option /ig,'<option style="display:none" ');
USAshow=USAi.replace(/<option /ig,'<option style="display:block" ');

When you replace the innerHTML with 'style="display :none" '
you will have to remove it in the next replace, or it will contain
<option style="display: block" style="display: none" (which will keep hiding it)

Just remove the style string, without it IE will display the options normally.
(IE puts spaces as well as capitals in odd places with innerHTML, so account for possible spaces with ( *):

USAi.replace(/<option *style *= *"display\: *none"'/ig,'<option ')