FF vs IE "onchange" Question

[mbiasetti]

Hello, quick question (hopefully):

I have a script that manipulates two "Select" elements. My onload calls a function that sets onchange for each "Select":

	
document.getElementById("make").onchange = populateModels;	
document.getElementById("models").onchange = modelSelected;

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

[Logician]

? 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.

[mbiasetti]

Code in action

Here is a shortened version of the code:

window.onload = initForm;
window.onunload = function() {};

function initForm() 
{  
	document.getElementById("make").selectedIndex = 0;
	document.getElementById("make").onchange = populateModels;	
	document.getElementById("models").onchange = modelSelected;
}

function populateModels() 
{
	var agilentModels = new Array("M/DSO6012A");
        var tekModels = new Array("DPO4032");
        var lecroyModels = new Array("WR44Xi");
        var yokogawaModels = new Array("DL9040L");
        // Arrays are actually much longer

var models = new Array(agilentModels, tekModels, lecroyModels, yokogawaModels);	
	var brandStr = this.options[this.selectedIndex].value;
	
	if (brandStr != "") 
  {					
    var modelLength = 0;
    var modelIndex = 0;
    
    switch (brandStr)
    {
      case "agilent": modelLength = agilentModels.length;
                      modelIndex = 0;
                      break;
      case "tektronix": modelLength = tekModels.length;
                        modelIndex = 1;
                        break;
      case "lecroy": modelLength = lecroyModels.length;
                        modelIndex = 2;
                        break;
      case "yokogawa": modelLength = yokogawaModels.length;
                        modelIndex = 3;
                        break;
      default: modelLength = 0;
               break;
    }    
    
		document.getElementById("models").options.length = 1;
		document.getElementById("models").options[0] = new Option("-- Select Model --");	
		
    var itemDiv = document.getElementById("itemdiv");
		if (itemDiv.childNodes.length > 0)
      itemDiv.removeChild(itemDiv.childNodes[0]);		
		
    for(var i=0, j=1; i<modelLength; i++, j++) 
    {     
	document.getElementById("models").options[j] = new Option((models[modelIndex])[i]);
    }		
}
}

function modelSelected()
{  

  var modelSelect = document.getElementById("models"); 
  var modelStr = modelSelect.options[modelSelect.selectedIndex].value;

  var itemDiv = document.getElementById("itemdiv");
  if (itemDiv.childNodes.length > 0)
  {
    itemDiv.removeChild(itemDiv.childNodes[0]);
  }	

switch (modelStr)
  {
    case "M/DSO6012A": generateItem(1); // guide
                                     break;

   // would be more cases here

function generateItem(m1Level)
{
  // 1: Guide, 2: Advisor, 3: Professional, 4: Specialist, 5: Expert
  
  var itemDiv = document.getElementById("itemdiv");
  var m1Text = "";
    
  switch (m1Level)
  {
    case 1: m1Text = document.createTextNode("M1 Oscilloscope Tools Guide");         
            break;
    case 2: m1Text = document.createTextNode("M1 Oscilloscope Tools Advisor");            
            break;
    case 3: m1Text = document.createTextNode("M1 Oscilloscope Tools Professional");           
            break;
    case 4: m1Text = document.createTextNode("M1 Oscilloscope Tools Specialist");    
            break;
    case 5: m1Text = document.createTextNode("M1 Oscilloscope Tools Expert");          
            break;
  }  
  
  var graf = document.createElement("p");
  
  graf.appendChild(m1Text);

  itemDiv.appendChild(graf);
      
}

That's all the code. The problem seems to be the onchange for "models" doesn't call modelSelected in IE.

[Logician]

[CODE=javascript]
for(var i=0, j=1; i<modelLength; i++, j++)
{
document.getEle mentById("model s").options[j] = new Option((models[modelIndex])[i]);
}
}
}[/code]

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.
[CODE=javascript]document.getEle mentById("model s").options[j] = new Option((models[modelIndex])[i],(models[modelIndex])[i]);[/CODE]

[mbiasetti]

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. :)