动态Dropdow不在Jquery中使用Onchange事件

Question

我正在使用Jquery Ajax For Populate the Dynamic Dropdown但它只适用于第一行JSTL-foreach迭代的table.its不适用于除第一行之外的其他行

$result=mysql_query("
        select
        social_posts.posted_by,
        social_posts.post as social_posts_post connectionstbl.connectedwith
        from 
        social_posts,connectionstbl
        where
        social_posts.posted_by = connectionstbl.connectedwith
        order by social_posts.p_id desc
");
while ($row =mysql_fetch_array($result))
{

    echo $row['social_posts_post']."<br/>";
}
?>

我的Html代码

$(document).ready(function() {
    $('#roleId').on('change', function() {
        var selectedValue = $('#roleId').val();
      $.ajax({
            url : 'FrontController?s=user&action=ROLES&roleId='+selectedValue,
            dataType: "json",   
            success : function(data) {
                var dropdown21 = $('#userIdEmail');
                  $('>option', dropdown21).remove();

                   $.each(data, function(i, val) {


                      var content="";
                     //for ( var i = 0; i < data.length; i++) {
                             content +='<option value="'+data[i].userId.toString()+'">'+data[i].userName.toString()+'</option>';
                        // };
                          $("#userIdEmail").append(content);


                }); //end of each 

            } 

        });//end of ajax
});
});//end of ready

Answer 1

我认为，问题是因为您使用相同的ID名称。尝试使用以下解决方案：

1）将下拉列表ID（roleId）更改为类。

 class="roleId"

2）使用此js代码

$(document).ready(function() {
$(document).on('change','.roleId', function() {
    var selectedValue = $(this).val();
    var nextSelect = $(this).next();
  $.ajax({
        url : 'FrontController?s=user&action=ROLES&roleId='+selectedValue,
        dataType: "json",   
        success : function(data) {

               nextSelect.empty();
               $.each(data, function(i, val) {


                  var content="";
                 //for ( var i = 0; i < data.length; i++) {
                         content +='<option value="'+data[i].userId.toString()+'">'+data[i].userName.toString()+'</option>';
                    // };
                      nextSelect.append(content);


            }); //end of each 

        } 

    });//end of ajax
});
});

p / s：请一起分享HTML代码段。

Answer 2

$(document).ready(function() {

     $(document.body).on('change','.text', function() {
            var selectedValue = $(this).val();   
            var $this = $(this);
        $.ajax({
            url : 'FrontController?s=user&action=ROLES&roleId='+selectedValue,
            dataType: "json",   
            success : function(data) {
                var dropdown21 = $('.userIdEmail1');
                $this.next('select').children('option').remove();

                   $.each(data, function(i, val) {


                      var content="";
                     //for ( var i = 0; i < data.length; i++) {
                             content +='<option value="'+data[i].userId.toString()+'">'+data[i].userName.toString()+'</option>';
                        // };
                          $this.next('select').append(content);


                }); //end of each 

            } 

        });//end of ajax

});
});