jQuery: получить (1) выбранное значение при работе с несколькими выпадающими

Question

Я пытаюсь получить выбранное значение из каждого раскрывающегося списка (1 вариант), нажимая его отдельно.В настоящее время, когда я изменяю выбранное значение из моего первого раскрывающегося списка, отображается правильное значение.Но когда я нажимаю на другое раскрывающееся меню и меняю значение, оно продолжает отображать значение с первого раскрывающегося списка.Выпадающие списки создаются динамически в таблице (цикл foreach) из базы данных MYSQL.Поэтому они имеют одинаковый идентификатор (#dropdownId), что может быть проблемой.Предупреждение срабатывает для обоих раскрывающихся списков, но «выбранное» значение корректно только при эффективном изменении первого раскрывающегося списка.При выборе чего-либо из другого раскрывающегося списка всегда будет отображаться последнее выбранное значение первого раскрывающегося списка.(то же самое для идентификатора)

$(document).on('change',$('#dropdownId'),function(){
        let itemVal = $('#dropdownId').find(':selected').val();
        var itemId = $('#dropdownId').find(':selected').attr('id');
        alert(itemVal);
        $.ajax({
            //..
            success: function(html){
                }
        });
    });

Answer 1

Поэтому у них одинаковый идентификатор (#dropdownId), что может быть проблемой - ДА Это проблема.

Идентификаторы всегда должны быть уникальными.Вам следует переключиться на использование общего className для делегирования вашего события:

Используйте общий класс, такой как myDropDown, и применяйте его к каждому из ваших раскрывающихся списков, сгенерированных вашим MYSQL:

HTML:

<select class="myDropDown"></select>

JQuery:

$(document).on('change','.myDropDown',function(){
        //$(this) refers to the drop down which triggered the event
        let itemVal = $(this).find(':selected').val();
        var itemId = $(this).find(':selected').attr('id');
        alert(itemVal);
        //AJAX Part