Laravel - 编辑模式表单下拉列表不显示数据

Question

我将 Laravel5.8 用于 Web 应用程序项目。我已成功将数据保存到数据库中，但在模态表单中检索数据时遇到问题。

型号

class AppraisalGoalType extends Model
{
  protected $table = 'appraisal_goal_types';
  protected $fillable = [
   'name',
   'parent_id',
   'max_score'
 ];

 public function children()
 {
   return $this->hasMany('App\AppraisalGoalType', 'parent_id');
 }
}

控制器

public function edit($id)
{
  $category = AppraisalGoalType::where('id', $id)->first();       
  return view('goal_types.edit')->with('category', $category);
}

public function update(UpdateGoalTypeRequest $request, $id)
{   
  $category = AppraisalGoalType::find($id);                            
  $category->name           = $request->name;
  $category->parent_id      = $request->parent_id;
  $category->max_score      = $request->max_score;

  $category->save();
  Session::flash('success', 'Updated successfully');
  return redirect()->route('goal_types.index');
}

索引视图

<div class="col-md-8">
 <div class="card card-secondary">
   <div class="card-header">
    <h3 class="card-title">Goal Type(s)</h3>
   </div>
   <div class="card-body">
    <ul class="list-group">
     @foreach ($categories as $category)
     <li class="list-group-item">
     <div class="d-flex justify-content-between">
       {{ $category->name }} 
       <strong>{{ $category->max_score }}</strong>
       <div class="button-group d-flex">
         <button type="button" class="btn btn-sm btn-primary mr-1 edit-category" data-toggle="modal" data-target="#editCategoryModal" data-id="{{ $category->id }}" data-name="{{ $category->name }}" data-max-score="{{ $category->max_score }}" data-parent-id="{{ $category->parent_id }}">Edit</button>

         <form action="{{ route('appraisal.goal_types.destroy', $category->id) }}" method="POST">
           @csrf
           @method('DELETE')

           <button type="submit" class="btn btn-sm btn-danger">Delete</button>
         </form>
       </div>
      </div>

      @if ($category->children)
      <ul class="list-group mt-2">
       @foreach ($category->children as $child)
       <li class="list-group-item">
       <div class="d-flex justify-content-between">
        {{ $child->name }} 
        <div class="button-group d-flex">
          <button type="button" class="btn btn-sm btn-primary mr-1 edit-category" data-toggle="modal" data-target="#editCategoryModal" data-id="{{ $child->id }}" data-name="{{ $child->name }}">Edit</button>
          <form action="{{ route('appraisal.goal_types.destroy', $child->id) }}" method="POST">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
          </form>
         </div>
        </div>
        </li>
        @endforeach
       </ul>
       @endif
     </li>
     @endforeach
     </ul>
   </div>
  </div>
</div>

编辑模态视图

<div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit Goal Type</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>                    
      <form action="" method="POST">
        @csrf
        @method('PUT')

        <div class="modal-body">
          <div class="form-group">
           <label class="control-label"> Parent Goal Type:</label>
           <select class="form-control select2bs4" data-placeholder="Choose Parent Goal Type" tabindex="1" name="parent_id" style="width: 100%;">
           <option value="">Select Parent Goal Type</option>
             @foreach ($categories as $category)
             <option value="{{ $category->id }}">{{ $category->name }}</option>
             @endforeach
            </select>
           </div>
           <div class="form-group">
             <label class="control-label"> Name:<span style="color:red;">*</span></label>
             <input type="text" name="name" class="form-control" value="" placeholder="Category Name" required>
            </div>
            <div class="form-group">
             <label class="control-label"> Max. Score:</label>
             <input type="number" name="max_score" class="form-control" value="" step="0.01" placeholder="Enter maximum score here: 15, 50, 75 etc" style="width: 100%;">
            </div>                       
           </div>

           <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Update</button>
           </div>
        </div>
    </form>
  </div>
</div>
            
<script type="text/javascript">
 $('.edit-category').on('click', function() {
 var id = $(this).data('id');
 var name = $(this).data('name');
 var parentId = $(this).data('parent-id');
 var maxScore = $(this).data('max-score');
 var url = "{{ url('category') }}/" + id;

 $('#editCategoryModal form').attr('action', url);
 $('#editCategoryModal form input[name="name"]').val(name);
 $('#editCategoryModal form select[name="parent_id"]').val(parentId);
 $('#editCategoryModal form input[name="max_score"]').val(maxScore);
 });
</script>            

索引视图刀片和创建工作正常

我有三个字段

姓名、父母ID、最大分数

当我单击索引视图刀片上的编辑按钮以显示带有数据的编辑模式表单字段时，名称字段和 max_score 字段显示加载的数据。但是，parent_id（下拉列表）没有显示任何数据。见下图。当我点击它时，我看到了数据。

预期结果：

我该如何解决这个问题？

谢谢。

Answer 1

选择值后使用 change() 事件。如果该字段在内容未更改的情况下失去焦点，则不会触发该事件。要手动触发事件，请应用不带参数的 .change()。在你的情况下应该是。

$('#editCategoryModal form select[name="parent_id"]').val(parentId).change();