0

我生成的下拉菜单适用于 Firefox 和 IE，但不适用于 Google Chrome。我有

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 使用取自 HTML 文件的 h3 标题的名称填充下拉菜单（选择选项类型）。这工作正常。问题是在谷歌浏览器中，点击下拉菜单时不会调用 filterChar。我有一个应该与所有浏览器兼容的函数（attachEvent）。请有人帮忙。

4

1 回答 1

0

您需要将单个事件侦听器附加到您的select元素。选项元素不是常规的 DOM 元素，这就是为什么听它们onclick不起作用的原因。

将单个onchange事件侦听器附加到选择将在选择更改时触发：

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

您可以使用作为第一个参数传递的事件对象在回调函数中获取对 select 的引用：

function filterChar(e){
    var select = e.target;
    alert("The selected item was index "+select.selectedIndex);
}
于 2012-10-21T19:42:07.933 回答