Take the 2-minute tour ×

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(){

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.

share|improve this question
Could you minimize the code while reproducing the issue? –  TobSpr Oct 21 '12 at 18:36
@Tobias Springer : I tried to simplify it. What is left is basically the creation of each option creation. –  user963070 Oct 21 '12 at 19:04
@user963070 Chrome should tell you exactly what the problem is in the javascript console (F12 or rightclick > inspect element) –  Stecman Oct 21 '12 at 19:11
So you only call addEvent for each option , but not for the select? is that right? –  TobSpr Oct 21 '12 at 19:11
@Stecman this is a good way –  TobSpr Oct 21 '12 at 19:12
show 6 more comments

1 Answer

up vote 0 down vote accepted

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);
share|improve this answer
Can you use "click" instead of "change?" That worked for me. –  user963070 Oct 21 '12 at 19:46
Yep, and most of the other event types. Use what suits your needs. –  Stecman Oct 21 '12 at 20:07
add comment

Your Answer


