Дан селект, инпут и кнопка. Сделайте так, чтобы в инпут можно было что-то ввести и значение изменилось в select

Question

<!DOCTYPE html>
<html>

<head>
  <title>123</title>
</head>

<body>
  <p>
    <select>
      <option>Выберите героя</option>
      <option>TTV_Wraith</option>
      <option>Pathfinder</option>
      <option>Wattson</option>
      <option>Bloodhound</option>
    </select>
  </p>
  <p><input type="text"></p>
  <p><input type="submit"></p>
  <script>
    let select = document.querySelector('select'),
      input = document.querySelector('input[type="text"]'),
      submit = document.querySelector('input[type="submit"]');
    submit.addEventListener('click', function() {
      select[input.value * 1].selected = true;
    });
  </script>
</body>

</html>

Answer 1

let select = document.querySelector('select'),
  input = document.querySelector('input[type="text"]'),
  submit = document.querySelector('input[type="button"]');
submit.addEventListener('click', function() {
  select[+input.value].selected = true;
});

<p>
  <select>
    <option>Выберите героя</option>
    <option>TTV_Wraith</option>
    <option>Pathfinder</option>
    <option>Wattson</option>
    <option>Bloodhound</option>
  </select>
</p>
<p><input type="text" value="2"></p>
<p><input type="button" value="Click"></p>

Answer 2

const select = document.querySelector('select')
const input = document.querySelector('input[type="text"]')
const submit = document.querySelector('input[type="submit"]')
const optionsNodeList = select.querySelectorAll('option')
const options = [...optionsNodeList].map(element => element.value)//массив из значений селекта ['Выберите героя','TTV_Wraith', 'Pathfinder' ... ]
options.shift()//удаляем первый элемент из массива ('Выберите героя')

submit.addEventListener('click', function(){
    if(options.some(element => element === input.value)) {//проверяем совпадает ли введенное значение в инпуте с хотя бы одним элементом массива options
        select.value = input.value
    }
})

<p>
    <select>
        <option>Выберите героя</option>
        <option>TTV_Wraith</option>
        <option>Pathfinder</option>
        <option>Wattson</option>
        <option>Bloodhound</option>
    </select>
</p>

<p><input type="text"></p>

<p><input type="submit"></p>

БЛОГ НА HUSL

Дан селект, инпут и кнопка. Сделайте так, чтобы в инпут можно было что-то ввести и значение изменилось в select

Ответы (2 шт):