Почему SelectedIndex не работает в моем коде?

#javascript #html

#javascript #HTML

Вопрос:

У меня есть следующий простой пример:

 <!DOCTYPE html>
<html>
<body>

<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>


<script>
document.addEventListener("change", function () {
  var x = document.getElementById("mySelect");
  var y = x.options[x.selectedIndex];
  alert(y);
}
</script>

</body>
</html>

когда я выбираю опцию в своем списке, предупреждение не появляется. Я также пытался с:

 var y = x.options[x.selectedIndex].index;

но не могу вернуть номер индекса заданной опции. Когда я использую .text вместо .index (чтобы получить текст из опции), он также не работает

Ответ №1:

Проблема с синтаксисом (отсутствует addEventListener закрывающая скобка).

 document.addEventListener("change", function () {
  var x = document.getElementById("mySelect");
  var y = x.options[x.selectedIndex].index;
  alert(y);
}); // missing ) here

 <select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>

Ответ №2:

вы хотите получить доступ textContent к выбранной опции?
(потому что он value доступен напрямую при выборе)

прослушиватель событий также должен использоваться при выборе, чтобы использовать this

 const mySelect = document.getElementById('my-select')

mySelect.addEventListener("change", function ()
  {
  console.clear()
  console.log( 'value=', this.value, ' || content=', this.options[this.selectedIndex].textContent)
  })

 <select id="my-select">
  <option value="A">Apple</option>
  <option value="O">Orange</option>
  <option value="P">Pineapple</option>
  <option value="B">Banana</option>
</select>

1. когда я пишу: document.addEventListener("change", function () { var x = document.getElementById("mySelect"); var y = x.options[x.selectedIndex].index; alert(y); }) тогда не нужно использовать EventListener для выбора, он работает нормально

2. @Muska затем вы получаете ВСЕ изменения событий для всего в документе, а также для других элементов вашей страницы, которые не выбраны вами