Question

My generated drop-down menu works in Firefox and IE but not Google Chrome. I have

function characterList(){
    //code removed that generates select list 
    var optionContainer = document.createElement("option");
    optionContainer.innerHTML = "Show All Character Lines";
    addEvent(optionContainer, "click", filterChar, false);
    selectContainer.appendChild(optionContainer); //appends option to select menu

    for (var i = 0; i < menu_lines; i++){
       var optionContainer1 = document.createElement("option");
       optionContainer1.innerHTML = "blah" //simplified so that names in menu are all "blah"
       selectContainer.appendChild(optionContainer1);//appends option to select menu
       addEvent(optionContainer1, "click", filterChar, false);//I think the problem is here.
    }
}

function filterChar(){
    alert("filterChar");
}


function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
       object.addEventListener(evName, fnName, cap);
}

characterList populates a drop-down menu (of the select option type) with the names taken from h3 headings of an HTML file. This works fine. The problem is that in Google Chrome filterChar is not called on drop-down menu clicks. I have a function given to me (attachEvent) that’s supposed to be all-browser compatible. Please someone help.

Answer 1

You need to attach a single event listener to your select element. Option elements aren’t regular DOM elements which is why listening to their onclick doesn’t work.

Attaching a single onchange event listener to a select will fire when the selection has changed:

addEvent(selectContainer, "change", filterChar, false);

You can get reference to the select in the callback function using the event object passed as the first parameter:

function filterChar(e){
    var select = e.target;
    alert("The selected item was index "+select.selectedIndex);
}