[PHP][Laravel][AJAX] 使用 Select2 和 AJAX 的下拉級聯/依賴下拉列表不工作
[英][PHP][Laravel][AJAX] Dropdown Cascade / Dependent Dropdown using Select2 and AJAX Not Working
問題描述
我正在嘗試使用 Select2 創建一個依賴下拉列表。 我一直在關注本教程：
https://ilmukita.org/laravel-8-membuat-dynamic-dependent-dropdown-menggunakan-select2/
當我嘗試 select 我的組服務（父）時，服務（子）選項沒有顯示，有什么想法可以顯示我的服務選項嗎？ 這是我的代碼：
[1] 路線
Route::controller(TaskController::class)->prefix('dashboard/task')->middleware(['role:admin|operator|user-bisnis|user-qa'])->group(function () { Route::get('/', 'index'); Route::get('/create', 'create')->name('task.create'); Route::post('/', 'store')->name('task.store'); Route::get('/edit/{id}', 'edit')->name('task.edit'); Route::post('/update/{id}', 'update')->name('task.update'); Route::post('/delete/{id}', 'destroy')->name('task.delete'); Route::get('/groupservice', 'getGroupService')->name('groupservice.select'); // Route::get('/service', 'getService')->name('service.select'); // });
[2] Controller
public function getService(Request $request) { $service = []; $groupserviceID = $request->groupserviceID; if ($request->has('q')) { $search = $request->q; $service = Service::select("id", "nama") ->where('gruplayanan_id', $groupserviceID) ->Where('deskripsi', 'LIKE', "%$search%") ->get(); } else { $service = Service::where('gruplayanan_id', $groupserviceID)->limit(10)->get(); } return response()->json($service); }
[3] 查看
$(document).ready(function() { $('#gruplayanan_id').change(function() { //clear select $("#layanan_id").empty(); //set id let groupserviceID = $(this).val(); if (groupserviceID) { $('#layanan_id').select2({ allowClear: true, ajax: { url: "{{ route('service.select') }}?groupserviceID=" + groupserviceID, dataType: 'json', delay: 250, processResults: function(data) { return { results: $.map(data, function(item) { return { text: item.nama, id: item.id } }) }; } } }); } }); $('#gruplayanan_id').on('select2:clear', function(e) { $("#layanan_id").select2(); }); });
<head> {{-- Select2 --}} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css"> </head> <body> <div class="mb-3"> <label for="gruplayanan" class="form-label">Pilih Group Layanan</label><span style="color: red;">*</span> <select class="theSelect" name="gruplayanan_id" id="gruplayanan_id" style="width: 300px" autofocus required> <option hidden></option> @foreach ($groupservice as $item => $groupservice) <option value="{{ $groupservice->id }}">{{ $groupservice->deskripsi }}</option> @endforeach </select> </div> <div class="mb-3"> <label for="layanan" class="form-label">Pilih Layanan</label><span style="color: red;">*</span> <select class="theSelect" name="layanan_id" id="layanan_id" style="width: 300px" autofocus required> </select> </div> </body>
1 個解決方案
解決方案1
0 2022-11-22 02:54:06
我找到了解決方案，似乎我項目中的 Jquery 和 Select2 庫有問題。例如，我不能用$(document).ready(function() {} function 將我的 class 包裝在 Select2 中，所以我試圖在<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>中延遲我的 CDN它有效！
PHP Ajax依賴下拉列表不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.