473,888 Members | 1,559 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

getElementById does not work on optgroup in IE 7?

2 New Member
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() {
  5. if (document.getElementById('country').value == "") {
  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";
  12. }
  13. else if (document.getElementById('country').value == "223") {
  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";
  22. }
  23. else if (document.getElementById('country').value == "38") {
  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";
  32. }
  33. else if (document.getElementById('country').value == "other") {
  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";
  40. }
  41. else {
  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";
  48. }
  50. }
  51. //-->
  52. </script>

Jan 28 '08 #1
5 5783
41 New Member
Hi Yaar,
Use '' instead of 'block'

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

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

:) Thanks
Jan 29 '08 #2
428 Contributor
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

And removing the display:none is just as much fun.
I wouldn't bother, but its up to you.
Jan 29 '08 #3
428 Contributor
//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.displ ay= '';
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
2 New Member
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() {
  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" ');
  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" ');
  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. }
  25. else {
  26. CAN.innerHTML=CANshow;
  27. USA.innerHTML=USAshow;
  28. }
  30. }
  31. //-->
  32. </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
Jan 29 '08 #5
428 Contributor
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

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

Similar topics

by: Peter | last post by:
L.S. I am developing a PHP-login script (on Lycos Tripod) that uses Session to pass on variables. Below is the entire (stripped) structure that I use. It opens a page where you can Set and Read the session variable BUT ... It doesn't work!!! It seems that both set- and readlink open their own private session. How can I get the read-link to access the proper session variable?
by: cv | last post by:
Hello All, I have used MultipartRequest like the following to upload images. MultipartRequest multi = new MultipartRequest(request, "../webapps/coreprogram/dealerlogos", 1024 * 1024); It works fine. But When a user accesses through Internet, this does not work.
by: Field | last post by:
Hi, the following snippet shows once executed this output: 2 2 I'd have rather expected this output: 2 10
by: Das | last post by:
Hi, I have made an application in ASP.net with C#. The application works fine with localhost. I have uploaded the site. I'm using web user controls in the form. but some of the button do not work when they are clicked. One thing that I have found that they are nested user controls. which do not work. I'm unable to understand what is the problem with that. thanks in advance. Das
by: Tom | last post by:
Hi Is this a conditional ? what is the structure of the statement? ch Tom
by: edai | last post by:
I am working on a code where I am loading XML data from a file on the server using ....... if (xmlhttp.readyState==4) { value=xmlhttp.responseText; var parser=new DOMParser(); xml=parser.parseFromString(value,"text/xml") ........ when I use getElementsByTagName I get ============firebug output==========
by: Newbie in ChiTown | last post by:
Here's my code: I am using MS Access and I am trying to update a table (InvoiceDetails) with data input by the user on a form. However, it does not update nor does it give me an error message. Code listed below. Also, can you recommend a book on SQL. Thanks. Dim con As Object Dim rs As ADODB.Recordset
by: Jim | last post by:
Hi, I want to schedule a Python program that reads the command line for input. However, when adding an argument to the command line Python will not pick it up when using Windows scheduled tasks. How do I get it to work? Thanks, Jim
by: benshep | last post by:
i am trying to create a form like this <html> <head> <script type="text/javascript"> function setValue(id,set) { document.myform.getElementById(id).value = set;
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.