[PHP][Laravel][AJAX] 使用 Select2 和 AJAX 的下拉级联/依赖下拉列表不工作
[英][PHP][Laravel][AJAX] Dropdown Cascade / Dependent Dropdown using Select2 and AJAX Not Working
问题描述
I'm trying to create a dependent dropdown using Select2.
我正在尝试使用 Select2 创建一个依赖下拉列表。 I've been following this tutorial:我一直在关注本教程：
https://ilmukita.org/laravel-8-membuat-dynamic-dependent-dropdown-menggunakan-select2/ https://ilmukita.org/laravel-8-membuat-dynamic-dependent-dropdown-menggunakan-select2/
When i'm trying to select my group service (parent) the service (child) option not showing up, any idea to show my service option?当我尝试 select 我的组服务（父）时，服务（子）选项没有显示，有什么想法可以显示我的服务选项吗？ Here's my code:这是我的代码：
[1] Route [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 [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] View [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
I've found the solution, it seems the Jquery and Library for Select2 in my project, has problem / issues.. For example i cant wrap my class in Select2 with $(document).ready(function() {} function, so i tried to defer my CDN in <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script> and it WORKS !!我找到了解决方案，似乎我项目中的 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它有效！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.