我在菜单内容上应用 ajax，当我按下 dorpdown 时，它只处理循环中的第一个元素，而不是模态内的其他元素

Question

我有一个场景，我为餐厅管理系统*。菜单肯定有不同的 菜肴和每道菜都有不同的成分和不同的 插件也是如此，毫无疑问，这是使用循环显示的。当我按 插件的编辑按钮出现一个模态，现在模态包含下拉列表 元素和 2 输入字段。当我选择下拉列表时 该模式中的项目它将获取我相关信息并显示 以下输入字段。我在下拉菜单中使用jquery的更改功能 使用阿贾克斯。Ajax 只在第一个模态元素上工作，而不是在 其他人的菜肴插件和循环中的成分元素。请指导 我做错了什么，或者什么是正确的方法。

I have asked this question on stakoverflow before and apply relevent 
solution generated dynamic classes on modal element so uniqueness remain 

，但同样的问题仍然存在。

````Modal section````
````start loop````
<div class="modal fade getid" data-id="{{$item['id']}}"  id="editaddon-{{$item['id']}}">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <h1>{{$item['id']}}</h1>
                <form class="form form-horizontal" method="post" >
                    @csrf
                    <div class="form-body">
                        <h4 class="form-section"><i class="ft-user"></i>Dish Addon form</h4>
                        <div class="form-group row">
                            <label class="col-md-3 label-control" for="projectinput6">Addons Name</label>
                            <div class="col-md-9">
                                <select  name="dish_addon"   class="form-control selectaddon-{{$item['id']}}">
                                    <option value="none" selected >Select Menu</option>
                                    @foreach($add_items as $add_item)
                                    @if($add_item['dish_id']==$item['id'])
                                    <option value="{{$add_item['id']}}">{{$add_item['name']}}</option>
                                    @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
                <form class="form form-horizontal" method="post" action="{{route('update.dish.addon',$addon->id)}}">
                    @csrf
                    <div class="form-body">
                        <h4 class="form-section"><i class="ft-user"></i>Dish Addon form</h4>
                        <div class="form-group row">
                            <label class="col-md-3 label-control" for="projectinput1">Addon Name</label>
                            <div class="col-md-9">
                                <input type="text"  value="" class="form-control addname-{{$item['id']}}" placeholder="Addon Name"
                                    name="name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-3 label-control" for="projectinput2">Addon Price</label>
                            <div class="col-md-9">
                                <input type="text"  value="" class="form-control addprice-{{$item['id']}}" placeholder="Addon Price"
                                    name="price">
                            </div>
                            <div class="col-md-1">
                                <input type="text"  value="" class="form-control dishadd-{{$item['id']}}" placeholder="Addon Price"
                                    name="add">
                            </div>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                            <i class="la la-check-square-o"></i> Save
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            ````the Ajax method below is in blade script file```
            @include('dish.dish_script')
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
`````end loop````
`````Ajax Section````
jQuery(document).ready(function(){
var x=jQuery('.getid').attr('data-id');
console.log(x);
jQuery('.selectaddon-'+x).change(function(e){
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '<?php echo csrf_token() ?>'
}
});
jQuery.ajax({
url: "{{ route('edit.dish.addon') }}",
method: 'post',
data: {
dish_addon: jQuery('.selectaddon-'+x).val(),
},
dataType:'JSON',
success: function(result){
if( result.success == 'true')
{
var data = result.data;
$('.addname-'+x).val(data.name);
$('.addprice-'+x).val(data.price);
$('.dishadd-'+x).val(data.id);
}
}
});
});
});

"结束阿贾克斯">

Answer 1

Laravel模态仅加载最后一个条目