本文档旨在解决Laravel项目中动态添加依赖下拉框时，出现的多行选择联动错误的问题。通过修改前端Javascript代码，确保每个下拉框的选项只更新到对应的行，实现正确的联动效果。本文将提供详细的代码示例和步骤，帮助开发者轻松实现动态依赖下拉框功能。
在Laravel项目中，实现动态添加依赖下拉框是一种常见的需求，例如，根据选择的国家动态加载对应的省份。然而，在实现多行动态添加时，可能会遇到一个问题：当选择一个下拉框的选项时，所有行的相关下拉框都会被更新，而不是只更新当前行的下拉框。本文将详细介绍如何解决这个问题，确保每个下拉框的选项只更新到对应的行，从而实现正确的联动效果。
问题分析
问题的根源在于Javascript代码在处理AJAX响应时，没有正确地定位到需要更新的下拉框。原始代码中，$("select[name^='state'").html(data.options); 这行代码会选择所有 name 属性以 state 开头的 select 元素，并将它们的内容都更新为相同的数据。
解决方案
要解决这个问题，需要修改Javascript代码，使其能够准确地定位到当前行需要更新的下拉框。以下是修改后的代码：
Create.blade.php
<html><head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script></head><body> <table class="table" id="dynamicTable12"> <tr> <th scope="col" width="250">Country</th> <th scope="col" width="250">State</th> </tr> <tr> <td> <select name="country[0]" class="form-control js" id="state" required="required"> <option value="">-- Select Project --</option> @foreach ($countries as $key => $value) <option value="{{ $key }}">{{ $value }}</option> @endforeach </select> </td> <td> <select name="state[0]" class="form-control js"> <option>-- Sub Head--</option> </select> </td> <td><button type="button" name="add" id="add12" class="btn btn-success">Add More</button></td> </tr> </table> <script type="text/javascript"> $(document).ready(function () { $(document.body).on("change.select2", "select[name^='country']", function () { var id_country = $(this).val(); var el = $(this) var token = $("input[name='_token']").val(); $.ajax({ url: "<?php echo route('select-ajax') ?>", method: 'GET', dataType: 'json', data: { id_country: id_country, _token: token }, success: function (data) { el.closest("tr").find("select[name^='state']").html(''); el.closest("tr").find("select[name^='state']").html(data.options); } }); }); }); </script> <script> let initializeSelect2 = function () { $('.js').select2(); } var i = 0; $("#add12").click(function () { ++i; $("#dynamicTable12").append('<tr> <td> <select class="form-control js" name="country[' + i + ']" required="required"><option value="">--select--</option>@foreach ($countries as $key => $value)<option value="{{ $key }}">{{ $value }}</option>@endforeach</select></td> <td> <select name="state[' + i + ']" class="form-control js"><option>-- Sub Head--</option></select></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>'); initializeSelect2() }); $(document).on('click', '.remove-tr', function () { $(this).parents('tr').remove(); }); $(document).ready(function () { initializeSelect2() }); </script></body></html>登录后复制关键的修改在于以下代码：
Flawless AI 好莱坞2.0，电影制作领域的生成式AI工具
32 查看详情 
el.closest("tr").find("select[name^='state']").html('');el.closest("tr").find("select[name^='state']").html(data.options);登录后复制这段代码使用了以下技巧：
$(this): 在 change 事件处理程序中，$(this) 指的是触发事件的 select 元素（即被选中的国家下拉框）。el = $(this): 将当前选择的元素赋值给变量el，方便后面使用。.closest("tr"): 从当前选择的元素开始，向上查找最近的 <tr> 元素，即包含当前下拉框的行。.find("select[name^='state']"): 在当前行中，查找 name 属性以 state 开头的 select 元素，即需要更新的省份下拉框。.html(data.options): 将省份下拉框的内容更新为从服务器返回的选项。通过这种方式，可以确保只有当前行对应的省份下拉框会被更新，而不会影响其他行的下拉框。
ajax-select.blade.php
<option value="0">--- Select Sub-Head ---</option>@if(!empty($states)) @foreach($states as $key => $value) <option value="{{ $key }}">{{ $value }}</option> @endforeach@endif登录后复制Controller
public function create(){ $countries = DB::table('projects')->pluck("name","id")->all(); return view('create',compact('countries'));}public function selectAjax(Request $request) { if($request->ajax()){ $states = DB::table('project_heads')->where('project_id',$request->id_country)->pluck("head","id")->all(); $data = view('ajax-select',compact('states'))->render(); return response()->json(['options'=>$data]); }}登录后复制总结
通过修改Javascript代码，使其能够准确地定位到需要更新的下拉框，可以有效地解决Laravel项目中动态添加依赖下拉框时出现的多行选择联动错误的问题。在处理动态添加的表单元素时，需要特别注意作用域和元素定位，以确保代码能够正确地操作目标元素。 此外，确保你的 select 元素使用了 select2 插件，并且在动态添加行后重新初始化 select2，可以提供更好的用户体验。
以上就是Laravel动态添加依赖下拉框：解决多行选择联动问题的详细内容，更多请关注php中文网其它相关文章！
