【问题标题】：How to select laravel option in edit ajax如何在编辑 ajax 中选择 laravel 选项
【发布时间】：2020-04-24 12:45:29
【问题描述】：

我的数据通过 ajax 返回到表中，并且在该数据中我也有编辑表单。

在我的编辑表单中，我选择了数据是动态且完美返回的选项，但我无法将选定属性添加到数据库中的已保存选项（它始终显示第一个）

截图

正如您在此屏幕截图中看到的那样，我的编辑表单无法在选择中获得正确的选项。

注意：

如果我的数据通过刀片循环 @foreach() 返回，我会选择正确的选项，如下所示：

{{ $location->province_id == $province->id ? 'selected' : '' }}


<option value="{{$province->id}}"  {{ $location->province_id == $province->id ? 'selected' : '' }}>{{$province->name}}</option>

但由于我的循环是在 ajax 代码中，我无法使用该方法。

代码

HTML

<table id="dataTableLocations" class="table table-striped table-bordered">
    <thead>
    <tr>
        <th width="30">Seq No.</th>
        <th>Name</th>
        <th>Customer</th>
        <th>Province</th>
        <th>City</th>
        <th>Address</th>
        <th>Postal Code</th>
        <th width="120">Options</th>
    </tr>
    </thead>
    <tbody id="table_dataLocations"></tbody>
</table>

Script

我已在代码中注释了我的选择选项，以便您更快地找到它们

//ajax call (rest of the code

success:function(data){

// return existed data to locations
$('#table_dataLocations').html('');
$(data.locations).each(function(_, i){
    var url = '{{ route("customer-locations.destroy", ":id") }}';
    url = url.replace(':id', i.id);

    var row = `<tr data-id="${i.id}">'+
    '<td>${i.seqNo}</td>'+
    '<td>${i.name}</td>'+
    '<td>${i.customer.name}</td>'+
    '<td>${i.province.name}</td>'+
    '<td>${i.city.name}</td>'+
    '<td>${i.address}</td>'+
    '<td>${i.postalCode}</td>'+
    '<td width="120">
        <button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#editModal-${i.id}">
        Edit
        </button>
        <!-- edit -->
        <div class="modal fade effect-flip-horizontal editModalLocation" id="editModal-${i.id}" tabindex="-1" role="dialog" aria-labelledby="editModal-${i.id}Label">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="editModal-${i.id}Label">Edit ${i.name}</h4>
                    </div>
                    <form id="updateLocation" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="modal-body">
                        <div class="row" style="margin-bottom:7px;">
                            <div class="col-md-6">
                                <div class="form-group" style="width:100%">
                                    <div class="sm-form-design">
                                    <textarea style="width:100%" name="addressLocationUpdate" id="addressLocationUpdate" cols="30" rows="10" class="form-control" placeholder="Please enter your customer address." >${i.address}</textarea>
                                        <label class="control-label">Address</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12 sm-form-design" style="margin-bottom:7px;">
                                    // Provinces select
                                        <select style="width:100%" class="form-control" name="province_idLocationUpdate" id="province_idLocationUpdate">
                                            @foreach($provinces as $province)
                                            <option value="{{$province->id}}">{{$province->name}}</option>
                                            @endforeach
                                        </select>
                                        <label class="control-label">Province</label>
                                    </div>
                                    <div class="col-md-12 sm-form-design" style="margin-bottom:7px;">
                                    // Cities select
                                        <select style="width:100%" class="form-control" name="city_idLocationUpdate" id="city_idLocationUpdate">
                                            @foreach($cities as $city)
                                            <option value="{{$city->id}}">{{$city->name}}</option>
                                            @endforeach
                                        </select>
                                        <label class="control-label">City</label>
                                    </div>
                                    <div class="col-md-12 sm-form-design" style="margin-bottom:7px;">
                                        <div class="form-group" style="width:100%">
                                            <div class="sm-form-design">
                                                <input style="width:100%" type="text" value="${i.postalCode}" name="postalCodeUpdate" id="postalCodeUpdate" class="form-control" placeholder="Please enter your customer postalC code." required>
                                                <label class="control-label">Postal Code</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row" style="margin-bottom:7px;">
                            <div class="col-md-3">
                                <div class="form-group" style="width:100%">
                                    <div class="sm-form-design">
                                        <input type="text"  style="width:100%" name="seqNoUpdate" id="seqNoUpdate" value="${i.seqNo}" class="form-control" placeholder="Please enter your location seqNo." required>
                                        <label class="control-label">seqNo</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="form-group" style="width:100%">
                                    <div class="sm-form-design">
                                        <input type="text" style="width:100%" value="${i.name}"  name="nameLocUpdate" id="nameLocUpdate" class="form-control" placeholder="Please enter your location name." required>
                                        <label class="control-label">Name</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" data-id="${i.id}" class="btn locationUpdate btn-success">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </div>
        <!-- ./Edit -->
        <Form id="deleteForm" method="post" action="${url}"> @csrf @method("DELETE")<button type="submit" data-id="${i.id}" class="btn btn-sm customerDelete btn-danger">Delete</button></form>
    </td>'
    '</tr>`;
    $('#table_dataLocations').append(row);
});
// rest of the code

问题

如何在我的编辑表单选择中选择正确的选项？

更新

我在我的代码中添加了循环，例如：

$.each(data.cities, function(key, value) {
    //value.id == city id
    //i.city_id == locations city_id
    if(value.id == i.city_id)
    {
        $('select[name="city_idLocationUpdate"]').append('<option value="'+ value.id +'" selected>'+ value.name +'</option>');
    }
    else
    {
        $('select[name="city_idLocationUpdate"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
    }
});

这可行，但问题在于我的所有位置都在表中获取最新行的城市，而最新行本身为空。

例子：

位置表::

row 1 = city abc
row 2 = city def
row 3 = city xyz

第 1 行和第 2 行显示城市 xyz，但第 3 行为空！

PS：here我分享了屏幕记录，以防我的解释不正确够清楚。

【问题讨论】：

标签： javascript php ajax laravel

【解决方案1】：

已解决

我放弃了 ajax 处理程序并将我的 @foreach 恢复为 html（与我上面的第一个代码相同）

然后我将其更改为：

@foreach($cities as $city)

  <option value="{{$city->id}}" ${`{{$city->id}}` == i.city_id ? 'selected' : ''}>{{$city->name}}</option>
                                                                                @endforeach

基本上我在返回的 html 中使用了我的 php 方法。

 ${`{{$city->id}}` == i.city_id ? 'selected' : ''}

希望对他人有所帮助。

【讨论】：

【解决方案2】：

您可以做的是将您的表分离为刀片并将其从 ajax 中返回。使用刀片，您现在可以定位选定的值。

Route::get('/ajaxTableDelete', 'Controller@myAjax');

public function myAjax() {
  $province = $provinceData;
  $cities= $cities;
  return view('view.deleteTable', ['province'=>$province,'cities'=>$cities]->render();
}

deleteTable.blade.php

// put your table here

通过ajax

success:function(data){
  $('#table_dataLocations').append(data);
}


$.each(data.cities, function(key, value) {
     $('select[name="city_idLocationUpdate"]')
    .append(`<option value="${value.id}" ${value.id == i.city_id ? 'selected' : ''}>${value.name}</option>`)

});

【讨论】：

谢谢，我更新了我的问题，你介意检查一下吗？
不幸的是，结果与我在更新中解释的相同，另外，如果我将它放在成功的一侧（如您的代码），它会返回 i 未定义的错误