By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,131 Members | 1,749 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,131 IT Pros & Developers. It's quick & easy.

getElementById does not work on optgroup in IE 7?

P: 2
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.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!--
  3. function showhideship() {
  4.  
  5. if (document.getElementById('country').value == "") {
  6.  
  7. document.getElementById('statewrap').style.display = "none";
  8. document.getElementById('zipcodewrap').style.display = "none";
  9. document.getElementById('stateotherwrap').style.display = "none";
  10. document.getElementById('countryotherwrap').style.display = "none";
  11.  
  12. }
  13. else if (document.getElementById('country').value == "223") {
  14.  
  15. document.getElementById('statewrap').style.display = "block";
  16. document.getElementById('ctyCAN').style.display = "none";
  17. document.getElementById('ctyUSA').style.display = "block";
  18. document.getElementById('zipcodewrap').style.display = "block";
  19. document.getElementById('stateotherwrap').style.display = "none";
  20. document.getElementById('countryotherwrap').style.display = "none";
  21.  
  22. }
  23. else if (document.getElementById('country').value == "38") {
  24.  
  25. document.getElementById('statewrap').style.display = "block";
  26. document.getElementById('ctyCAN').style.display = "block";
  27. document.getElementById('ctyUSA').style.display = "none";
  28. document.getElementById('zipcodewrap').style.display = "block";
  29. document.getElementById('stateotherwrap').style.display = "none";
  30. document.getElementById('countryotherwrap').style.display = "none";
  31.  
  32. }
  33. else if (document.getElementById('country').value == "other") {
  34.  
  35. document.getElementById('statewrap').style.display = "none";
  36. document.getElementById('zipcodewrap').style.display = "block";
  37. document.getElementById('stateotherwrap').style.display = "block";
  38. document.getElementById('countryotherwrap').style.display = "block";
  39.  
  40. }
  41. else {
  42.  
  43. document.getElementById('statewrap').style.display = "block";
  44. document.getElementById('zipcodewrap').style.display = "block";
  45. document.getElementById('stateotherwrap').style.display = "block";
  46. document.getElementById('countryotherwrap').style.display = "block";
  47.  
  48. }
  49.  
  50. }
  51. //-->
  52. </script>
  53.  

Thanks
Jan 28 '08 #1
Share this Question
Share on Google+
5 Replies


P: 41
Hi Yaar,
Use '' instead of 'block'

Example
***************
document.getElementById('ctyUSA').style.display = "block";

Instead of above code
document.getElementById('ctyUSA').style.display = "";

:) Thanks
Jan 29 '08 #2

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

document.getElementById('optgroup_2').style.displa y='none'
//hide the group including the label;
document.getElementById('optgroup_2').style.displa y=''
// '' will remove the 'none' and show the group;


With IE you have to rearrange the furniture-

[code=javascript]var who=document.getElementById('optgroup_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.
Jan 29 '08 #3

100+
P: 428
//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:
Expand|Select|Wrap|Line Numbers
  1. var who=document.getElementById('optgroup_2');
  2. who.style.display= 'none';
and who.style.display= '';
will remove the 'none' and show the group normally;

With IE you have to rearrange the furniture-
Expand|Select|Wrap|Line Numbers
  1. var who=document.getElementById('optgroup_2');
  2. var s=who.innerHTML;
  3. s=s.replace(/<option /ig,'<option style="display:none" ');
  4. 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.
Jan 29 '08 #4

P: 2
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)

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!--
  3. function showhideship() {
  4.  
  5. var CAN=document.getElementById('ctyCAN');
  6. var CANi=CAN.innerHTML;
  7. CANhide=CANi.replace(/<option /ig,'<option style="display:none" ');
  8. CANshow=CANi.replace(/<option /ig,'<option style="display:block" ');
  9.  
  10. var USA=document.getElementById('ctyUSA');
  11. var USAi=USA.innerHTML;
  12. USAhide=USAi.replace(/<option /ig,'<option style="display:none" ');
  13. USAshow=USAi.replace(/<option /ig,'<option style="display:block" ');
  14.  
  15.  
  16. if (document.getElementById('country').value == "223") {
  17. CAN.innerHTML=CANhide;
  18. USA.innerHTML=USAshow;
  19. }
  20. else if (document.getElementById('country').value == "38") {
  21. CAN.innerHTML=CANshow;
  22. USA.innerHTML=USAhide;
  23. }
  24.  
  25. else {
  26. CAN.innerHTML=CANshow;
  27. USA.innerHTML=USAshow;
  28. }
  29.  
  30. }
  31. //-->
  32. </script>
  33.  
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
Jan 29 '08 #5

100+
P: 428
Expand|Select|Wrap|Line Numbers
  1. USAhide=USAi.replace(/<option /ig,'<option style="display:none" ');
  2. 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 ')
Jan 29 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.