Как получить идентификатор элемента select-option с помощью прослушивателя события «change»?

Question

Я новичок в javascript, и я работаю над этим "проектом", но мне нужна помощь, потому что я застрял.Возможно, я не правильно выразил себя в заголовке, поэтому вот оно:

Я хотел бы получить идентификатор элемента option (<select> <option id="#"> </select>) с помощью прослушивателя событий "change" на <select>. Поэтому, когда я выбираю, например, "Action" из выбора dropdown, я бы хотел, чтобы это изменение вызвало функцию, которая получит идентификатор этого элемента и использовала его в функции ниже.Вот код, который у меня есть, который в основном выполняет следующее:

1.) Получает список жанров;

2.) Затем для каждого элемента в response.data.genres задаетсячисло, соответствующее длине массива (всего 19 элементов).

3.) Если выбранный элемент "option" соответствует названию жанра в массиве, то он определяет идентификатор жанра (целое число) и делает еще один запрос к API, чтобы вывести список фильмов, соответствующих идентификатору жанров.Заранее спасибо.

//Genres
function genres(){
    //API request.
    axios.get("https://api.themoviedb.org/3/genre/movie/list?api_key=<API_KEY>&language=en-US")
        .then((response)=>{
            //console.log(response);

            let genres = response.data.genres;
            genres.length;
            console.log(genres)
            for(var i = 0; i < genres.length; i++){
                var genresId = response.data.genres[i];
                var tag = document.getElementById("Thriller");
                console.log(genresId);
                if(tag.id === genresId.name){
                   let genre = genresId.id;
                   axios.get("https://api.themoviedb.org/3/discover/movie?api_key=<API_KEY>&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_genres="+genre)
                    .then((response)=>{
                        console.log(response);
                    })
                }
            }
        })
}

Answer 1

Следующий код будет искать элемент <select> (точный его идентификатор), а при изменении он будет выводить идентификатор прямого потомка (<option> в данном случае).

$(document).ready(function(){
    $("#myDropdown").on("change", function(){
    the_id = $(this).children(":selected").attr("id")
    $("#output").html(the_id);
  });
});

Я сделал пример для вас> JS Fiddle

Надеюсь, вы сможете использовать код jQuery.

Answer 2

Так что есть два шага, если я правильно понимаю. 1. получить список жанров и заполнить им поле выбора. 2. получить список фильмов, если выбрана опция в окне выбора.

Первый шаг вы можете сделать с помощью метода innerHTML. Для каждого возвращаемого жанра вы создаете строку типа <option value='genre'>genre</option>. С innerHTML вы добавляете эти опции в поле выбора. Свойство value - это то, что вы используете, чтобы увидеть, какая опция выбрана.

Затем мы добавляем обработчик событий в dropbox, чтобы наш скрипт реагировал на изменения, сделанные пользователем. Событие, которое мы слушаем, называется «изменение», и оно вызовет функцию «getMovies». См. Документы Mozilla для получения дополнительной информации. event.target.value даст вам значение выбранного параметра, который вы можете использовать в качестве идентификатора жанра.

Внутри этой функции вы выполните второй вызов API, чтобы получить список фильмов.

Простой пример без вызова API:

let genreDropdown = document.getElementById('genre');
genreDropdown.innerHTML = getGenres();
genreDropdown.addEventListener("change", getMovies);

function getGenres(){
    let genres = ['action', 'romcom', 'thriller']; //this would be replaced with the api call to get the genres
    let innerHtml = '';
    
    for(var i = 0; i < genres.length; i++){
      var option = '<option value='+genres[i]+'>'+genres[i]+'</option>';
      innerHtml += option;
    }
    return innerHtml;
}

function getMovies(event) {
   let genre =  event.target.value;
   alert(genre) //you can replace this with the api call to get the movies.
}

<select id='genre'>
  <option>loading...</option>
</select>