javascript - jQuery:使用多个下拉菜单时获取 (1) 选择的值

Question

当单独单击它时，我试图从每个选择下拉列表(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

Therefore they have the same Id (#dropdownId), which might be a problem - YES This is a problem.

ID 应该始终是唯一的。您应该改用通用的 className 来进行事件委托(delegate):

使用像 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