469,313 Members | 2,207 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,313 developers. It's quick & easy.

FF vs IE "onchange" Question

Hello, quick question (hopefully):

I have a script that manipulates two "Select" elements. My onload calls a function that sets onchange for each "Select":
Expand|Select|Wrap|Line Numbers
  1.  
  2. document.getElementById("make").onchange = populateModels;    
  3. document.getElementById("models").onchange = modelSelected;
  4.  
The code works fine in Firefox (of course), but IE only recognizes the first one. Using alert boxes, I've pinpointed that IE will run populateModels to completion, but will never enter modelSelected.

Does anyone have any ideas as to why? Do you need to see the functions? I don't see any syntax errors, so I'm a little lost. Any help is appreciated. Thanks.

-Mike Biasetti
Feb 22 '08 #1
4 1438
Logician
210 100+
? Do you need to see the functions?
Yes and also all the associated HTML (preferably a URL), and a confirmation that there are no errors showing in the console.
Feb 24 '08 #2
Code in action

Here is a shortened version of the code:

Expand|Select|Wrap|Line Numbers
  1. window.onload = initForm;
  2. window.onunload = function() {};
  3.  
  4. function initForm() 
  5. {  
  6.     document.getElementById("make").selectedIndex = 0;
  7.     document.getElementById("make").onchange = populateModels;    
  8.     document.getElementById("models").onchange = modelSelected;
  9. }
  10.  
  11. function populateModels() 
  12. {
  13.     var agilentModels = new Array("M/DSO6012A");
  14.         var tekModels = new Array("DPO4032");
  15.         var lecroyModels = new Array("WR44Xi");
  16.         var yokogawaModels = new Array("DL9040L");
  17.         // Arrays are actually much longer
  18.  
  19. var models = new Array(agilentModels, tekModels, lecroyModels, yokogawaModels);    
  20.     var brandStr = this.options[this.selectedIndex].value;
  21.  
  22.     if (brandStr != "") 
  23.   {                    
  24.     var modelLength = 0;
  25.     var modelIndex = 0;
  26.  
  27.     switch (brandStr)
  28.     {
  29.       case "agilent": modelLength = agilentModels.length;
  30.                       modelIndex = 0;
  31.                       break;
  32.       case "tektronix": modelLength = tekModels.length;
  33.                         modelIndex = 1;
  34.                         break;
  35.       case "lecroy": modelLength = lecroyModels.length;
  36.                         modelIndex = 2;
  37.                         break;
  38.       case "yokogawa": modelLength = yokogawaModels.length;
  39.                         modelIndex = 3;
  40.                         break;
  41.       default: modelLength = 0;
  42.                break;
  43.     }    
  44.  
  45.         document.getElementById("models").options.length = 1;
  46.         document.getElementById("models").options[0] = new Option("-- Select Model --");    
  47.  
  48.     var itemDiv = document.getElementById("itemdiv");
  49.         if (itemDiv.childNodes.length > 0)
  50.       itemDiv.removeChild(itemDiv.childNodes[0]);        
  51.  
  52.     for(var i=0, j=1; i<modelLength; i++, j++) 
  53.     {     
  54.     document.getElementById("models").options[j] = new Option((models[modelIndex])[i]);
  55.     }        
  56. }
  57. }
  58.  
  59. function modelSelected()
  60. {  
  61.  
  62.   var modelSelect = document.getElementById("models"); 
  63.   var modelStr = modelSelect.options[modelSelect.selectedIndex].value;
  64.  
  65.   var itemDiv = document.getElementById("itemdiv");
  66.   if (itemDiv.childNodes.length > 0)
  67.   {
  68.     itemDiv.removeChild(itemDiv.childNodes[0]);
  69.   }    
  70.  
  71. switch (modelStr)
  72.   {
  73.     case "M/DSO6012A": generateItem(1); // guide
  74.                                      break;
  75.  
  76.    // would be more cases here
  77.  
  78. function generateItem(m1Level)
  79. {
  80.   // 1: Guide, 2: Advisor, 3: Professional, 4: Specialist, 5: Expert
  81.  
  82.   var itemDiv = document.getElementById("itemdiv");
  83.   var m1Text = "";
  84.  
  85.   switch (m1Level)
  86.   {
  87.     case 1: m1Text = document.createTextNode("M1 Oscilloscope Tools Guide");         
  88.             break;
  89.     case 2: m1Text = document.createTextNode("M1 Oscilloscope Tools Advisor");            
  90.             break;
  91.     case 3: m1Text = document.createTextNode("M1 Oscilloscope Tools Professional");           
  92.             break;
  93.     case 4: m1Text = document.createTextNode("M1 Oscilloscope Tools Specialist");    
  94.             break;
  95.     case 5: m1Text = document.createTextNode("M1 Oscilloscope Tools Expert");          
  96.             break;
  97.   }  
  98.  
  99.   var graf = document.createElement("p");
  100.  
  101.   graf.appendChild(m1Text);
  102.  
  103.   itemDiv.appendChild(graf);
  104.  
  105. }
  106.  
That's all the code. The problem seems to be the onchange for "models" doesn't call modelSelected in IE.
Feb 25 '08 #3
Logician
210 100+
Expand|Select|Wrap|Line Numbers
  1.     for(var i=0, j=1; i<modelLength; i++, j++) 
  2.     {     
  3.     document.getElementById("models").options[j] = new Option((models[modelIndex])[i]);
  4.     }        
  5. }
  6. }
modelSelected is being executed as an alert at the start will confirm.
The Option constructor takes two parameters, if you supply only one, I.E. will not assign anything to the value property.
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("models").options[j] = new Option((models[modelIndex])[i],(models[modelIndex])[i]);
Feb 25 '08 #4
Wow, that worked perfectly.

I think it would have taken a very long time before I figured that one out on my own.

Thank you very much for your help. :)
Feb 25 '08 #5

Post your reply

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

Similar topics

2 posts views Thread by Mark Durgee | last post: by
1 post views Thread by Ron Brennan | last post: by
1 post views Thread by John Pastrovick | last post: by
3 posts views Thread by Norm via DotNetMonster.com | last post: by
1 post views Thread by julian.tklim | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.