jQuery：使用多个下拉菜单时获取（1）选定的值

Question

我试图从每个 Select-Dropdown（1 个选项）中获取选定的值，当单独单击它时。目前，当我从第一个下拉列表中更改选定的值时，它会显示正确的值。但是，当我单击另一个下拉列表并更改值时，它会继续显示第一个下拉列表中的值。下拉列表是在 MYSQL 数据库的表（foreach 循环）中动态创建的。因此它们具有相同的 ID (#dropdownId)，这可能是个问题。两个下拉菜单都会触发警报，但“选定”值仅在有效更改第一个下拉菜单时才正确。从另一个下拉列表中选择某些内容时，它将始终显示第一个下拉列表的最后选择的值。 （id也一样）

$(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

因此它们具有相同的 ID (#dropdownId)，这可能是 问题 - 是的，这是个问题。

ID 应该始终是唯一的。您应该切换到使用通用 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