Как передать значение из выпадающего списка?

Question

[Bolekovich]

Нужно, чтобы значение из выпадающего списка вставлялось в ссылку.

function inputAni(event){
    event.preventDefault();

    var e = document.getElementById('genre_select'),
    query = e.value;

    fetch(`https://private-anon-f9d28e5f08-jikan.apiary-proxy.com/v3/search/anime?q=&page=1&genre=${query}&score&sort=desc`)
    .then(res=>res.json())
    .then(updateDom4)
    .catch(err=>console.warn(err.message));
}

const form = document.getElementById('genre_select');
    if (form){
        form.addEventListener("change", inputAni);
    }

<div class="input-field col s12">
            <select multiple id="genre_select">
              <option value="" disabled selected>Жанр:</option>
              <option value="1">Преключение</option>
              <option value="2">Детектив</option>
              <option value="3">Спорт</option>
              <option value="3">Меха</option>
              <option value="3">Боевик</option>
              <option value="3">Фентези</option>
              <option value="3">Научная фантастика</option>
            </select>
          </div>

Comments

[Алексей Абрамов]

В какую ссылку? Если которая в fetch, то сейчас у вас все корректно работает.

[Bolekovich]

Алексей Абрамов, передает почему-то пустое значение

[Алексей Абрамов]

Bolekovich, да вроде все работает, https://stackblitz.com/edit/js-dg1l66?file=index.html

[Bolekovich]

Алексей Абрамов, да действительно, но у меня почему-то так

[Алексей Абрамов]

Bolekovich, тогда пробуй дебажить и смотреть, что в квери. Вообще тебе не нужны эти строчки

var e = document.getElementById('genre_select'),
    query = e.value;

, так как в эвент уже прилетает текущий оптион(обновил пример по ссылке).

[Bolekovich]

Алексей Абрамов, console.log(value);
Выдает в консоли

[Алексей Абрамов]

Bolekovich, перенеси мой пример к себе, я чет запутался или сам сделай пример в песочнице, глянем что там да как.

[Bolekovich]

function inputAni(e){
  const value = e.target;
  console.log(value);
  
  fetch(
    `https://private-anon-f9d28e5f08-jikan.apiary-proxy.com/v3/search/anime?q=&page=1&genre=${value}&score&sort=desc`
  )
    .then((res) => res.json())
    .then (updateDom4(data))
    .catch((err) => console.warn(err.message));
}

if (form2) {
  form2.addEventListener('change', inputAni);
}

Я вроде все поменял, сам уже не понимаю(

Answer 1

[Сергей delphinpro]

https://qna.habr.com/q/620323