Как установить обработчик событий на select?

15 июля 2021, 17:00

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Моя первая настоящая HTML-страничка</title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
    <select id="select">
        <option value="one">Один</option>
        <option value="two">Два</option>
        <option value="three">Три</option>
    </select>
    <input type="text" value="">
</body>
<script>
    var select = document.getElementById("select");
    var elements = select.options;      
    var input = document.querySelector("input");
    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener("click", func);
    }
    function func() {
        input.value = this.innerHTML;
    }
</script>
</body>
</html>

Надо сделать чтобы при клике на один из option, в input вставлялся option.innerHTML

Answer 1

Нужно добавлять обработчик к всему элементу select, а не к каждому элементу option. Помимо этого у элемента option нет события click...

var select = document.getElementById("select");      
var input = document.querySelector("input"); 
 
select.addEventListener("change", function(){ 
  // Если нужно value 
  // input.value = this.value; 
  // Если нужен текст 
  input.value = this.options[this.selectedIndex].text; 
});

<select id="select"> 
  <option value="one">Один</option> 
  <option value="two">Два</option> 
  <option value="three">Три</option> 
</select> 
<input type="text" value="">