Question

我正在尝试创建一个select元素并向其添加一个'input'事件。使用JavaScript的所有内容如下所示：

function showSelectedOption(str) {
  alert(str);
}

var list = document.createElement("select");
list.id = "listId";
list.addEventListener('input', showSelectedOption(this.selectedIndex));

for (var i = 0; i < 3; i++) {
  var option = document.createElement("option");
  option.value = "none";
  option.text = "text";
  list.appendChild(option);
}

document.body.appendChild(list);

但是，当我检查元素时，不会附加输入事件。

我该如何解决这个问题？

Answer 1

有几个问题。

您没有绑定showSelectedOption函数，而是调用它并使用其返回值（ undefined ）作为事件处理程序。

所以在不调用它的情况下通过showSelectedOption。

然后，您必须在方法内找到该元素的selectedIndex，方法是在触发event事件时使用传递给函数的input。

function showSelectedOption(event) {
  var element = event.target,
      index = element.selectedIndex,
      value = element.options[index].value;

  alert(value);
}

var list = document.createElement("select");

list.id = "listId";
list.addEventListener('input', showSelectedOption);

for (var i = 0; i < 3; i++) {
  var option = document.createElement("option");
  
  option.value = "none";
  option.text = "text";
  list.appendChild(option);
}

document.body.appendChild(list);

Answer 2

您可以使用setAttribute来改善此工作，并将oninput属性的值设置为字符串（而不是函数）showSelectedOption(this.selectedIndex)。

＆＃13;

function showSelectedOption(str) {
  alert(str);
}

var list = document.createElement("select");
list.id = "listId";
list.setAttribute('oninput', "showSelectedOption(this.selectedIndex)");

for (var i = 0; i < 3; i++) {
  var option = document.createElement("option");
  option.value = "none";
  option.text = "item"+i;
  list.appendChild(option);
}

document.body.appendChild(list);

＆＃13;

Select元素没有附加addEventListener

2 个答案: