使用 jquery 和 laravel 6.x 在引導程序 4 模式中彈出編輯表單時如何獲取選定項目？

Question

我正在研究 laravel 項目，我需要使用引導模式來添加和編輯記錄。 但我不知道如何讓選定的記錄顯示在選擇選項下拉列表中。 請在下面查看我的代碼。

編輯表格

在 select 選項應該 select 從列表中選擇的項目之一，但它沒有

我的彈出窗口編輯模式代碼

<!--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

Yo 應該使用 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>

Answer 2

umar_sharif 的解決方案會起作用，但是您必須在加載數據時將模態 <div class="modal fade text-left" id="EditModal"... 放在 foreach 循環中，但是您必須提供不同的 id ，要實現這一點，您可以在變量中連接，例如“EditModal-”+ 程序或任何可用於制作具有不同 id 的模態的 id。 這些 id 應該相同才能啟動模態。 因此，通過這種方式，您將創建如此多的模式作為您擁有的數據項。