Выделенный элемент не добавляется addEventListener

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

Вы можете выполнить эту работу, используя вместо этого setAttribute и установить значение атрибута oninput в виде строки (не функции) showSelectedOption(this.selectedIndex).

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);

Answer 2

Пара проблем.

Вы не связываете функцию 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);