[如何使用jquery和laravel 6.x在bootstrap 4模态中弹出式编辑表单时获取所选项目？

Question

我正在研究laravel项目，我需要使用引导程序模式来添加和编辑记录。但我不知道如何使选择的记录显示在选择选项下拉列表中。请在下面查看我的代码。

编辑表单

在选择选项中，应从列表中选择一项，但不能选择

我的弹出窗口编辑模式代码

<!--login form Modal -->
<div class="modal fade text-left" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel33">EDIT PROGRAM GRADE </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="bx bx-x"></i>
                </button>
            </div>
            <form class="form" action="{{ route('grade.update') }}" method="POST">
                {{ method_field('patch') }}
                @csrf
                <div class="modal-body">
                <input type="hidden" name="grade_id" value="{{ $grade->id }}" id="gradeID">
                    <label>GRADE</label>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Grade Name" id="gradeName" name="grade_name" required>
                    </div>
                    <label>PROGRAM</label>


                    <div class="form-group">
                        <select class="form-control" name="program_id" id="program" >
                            {{-- <option value="{{ $grade->Program->id }} selected " >{{ $grade->Program->name }}</option> --}}
                            @foreach ($selectProgram as $program)

                                <option value="{{ $program->id }} ">{{ $program->code }} - {{ $program->name }}</option>

                            @endforeach

                        </select>
                    </div>



                    <label>DISPLAY ORDER</label>
                    <div class="form-group">
                        <input type="number" class="form-control" placeholder="Display Order" id="displayOrder" name="display_order" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-secondary" data-dismiss="modal">
                        <i class="bx bx-x d-block d-sm-none"></i>
                        <span class="d-none d-sm-block">Close</span>
                    </button>
                    <button type="submit" class="btn btn-primary ml-1">
                        <i class="bx bx-check d-block d-sm-none"></i>
                        <span class="d-none d-sm-block">Update</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

我的Jquery脚本

 <script>

$('#EditModal').on('show.bs.modal', function (event) {

  var button = $(event.relatedTarget)
  var grade = button.data('grade')
  var displayOrder = button.data('order')
  var program = button.data('program')
  var gradeID = button.data('id')

  var modal = $(this)
  modal.find('.modal-body #gradeID').val(gradeID)
  modal.find('.modal-body #gradeName').val(grade)
  modal.find('.modal-body #displayOrder').val(displayOrder)
  modal.find('.modal-body #program').val(program)
})
</script>

Answer 1

Y应该使用if＆else来显示此选择的选项，如果它与id匹配，则选择否则否则不显示

<div class="form-group">
 <select class="form-control" name="program_id" id="program" >

 @foreach ($selectProgram as $program)
  @if($program->id==$grade->Program->id)//which variable for program id you passed from controller
 <option value="{{ $program->id }}" selected>{{ $program->code }} - {{ $program->name }} 
 </option>
@else
<option value="{{ $program->id }}">{{ $program->code }} - {{ $program->name }} 
 </option>
@endif

@endforeach

</select>
</div>