Dynamic OnClick in IE, Safari, Firefox

Question

I have the following bit of code. I'm trying to dynamically add drop-down options to a second drop-down based on the selection in a first drop-down. Both are generated through an Ajax call to a script that pulls the data from a database. Here is the relevant code.

 function setSub(doc) {
  // Setup some variables
  var sNode = document.getElementById('4'); // GRAB THE ELEMENT HERE
  var rmiData = doc.getElementById('rmiData').innerHTML;
  var aItems = rmiData.split("|");
  var aVals;
  // Set some background
  sNode.style.background = "#fff";
  // Loop through adding options to the drop down
  for (var x = 0; x < (aItems.length -1); x ++) {
   aVals = aItems[x].split("=");
   // ADD OPTIONS DYNAMICALLY TO SECOND DROP-DOWN HERE
   sNode.options[x+1] = new Option(aVals[1],aVals[0],false,false);
   // PROBLEM HERE: ADD ONCLICK TO THE OPTION WE JUST CREATED
   sNode.options[x+1].onclick = function() { fixDayList(); };
   //sNode.options[x+1].onclick = new Function("fixDayList();");
   //sNode.options[x+1].setAttribute("onclick", "fixDayList();");
   // END PROBLEM LINES
  }
  // Set the length
  sNode.length = x+1;
  // Select the first item in the list
  sNode[0].selected = true;
 }

If you notice the section after the "// PROBLEM HERE" line, I've tried to add the onclick event in three different ways. All 3 work correctly in Firefox. None of the 3 work in IE6 or Safari (Not sure on IE8). Any suggestions for this? The rest of the code is using some old-schoolish JavaScript that I copied from an existing piece of legacy code that works and I'm just trying to add onclick to my version (preferably without re-writing a lot of code).

Any thoughts on why the onclick events don't fire from Safari and IE?

I do have access to jQuery in my code. So, if jQuery fixes this internally and I can figure out the proper selector to use, that would work. But, I'm not sure how to select this, exactly. I tried:

$('#4').options[x+1].click( function() { fixDayList(); } );

But that selector is bad and I'm not sure exactly how to select the right one (I'm green in the ways of jQuery).

Answer 1

Use something like this:

if(window.addEventListener){
   sNode.options[x+1].addEventListener('click', fixDayList, false);
} else if (window.attachEvent){
   sNode.options[x+1].attachEvent('onclick', fixDayList);
} else {
   sNode.options[x+1].onclick = fixDayList;
}

Update:

In Safari, unless the option elements are visible and not displayed as a dropdown list, they will never trigger a click event. But, if you add size=10 or whatever to your select element, Safari will then trigger click events on the option elements.

Your best bet will be to listen for the change event on the select element instead of trying to use click on the options.