Lar*el 动态添加依赖下拉框：解决多行数据联动问题

技术教程
2025-11-20 14:30:12

laravel 动态添加依赖下拉框：解决多行数据联动问题

本文档旨在解决 Lar*el 中动态添加依赖下拉框时，出现的多行数据联动错误问题。通过修改前端 J*aScript 代码，确保每个下拉框只更新对应行的状态选项，实现正确的动态依赖联动效果。本文将提供详细的代码示例和步骤说明，帮助开发者快速解决类似问题。

在 Lar*el 开发中，动态添加依赖下拉框是一个常见的需求，例如，根据选择的国家动态加载对应的省份。然而，在实现多行动态添加的依赖下拉框时，可能会遇到一个问题：当选择一个国家时，所有行的省份下拉框都会被更新为相同的内容，而不是只更新当前行。本文将提供一种解决方案，确保每个下拉框只更新对应行的状态选项。

问题分析

问题的原因在于，原始的 J*aScript 代码在处理 change 事件时，没有正确地定位到当前行的省份下拉框。它使用了 $("select[name^='state'").html(data.options); 这段代码，导致所有匹配 name 属性以 "state" 开头的下拉框都被更新了。

解决方案

要解决这个问题，需要修改 J*aScript 代码，使其能够准确地找到当前行的省份下拉框。这可以通过使用 $(this) 来引用触发 change 事件的当前国家下拉框，然后使用 closest() 和 find() 方法来定位到同一行的省份下拉框。

以下是修改后的 J*aScript 代码：

$(document).ready(function () {

    $(document.body).on("change.select2", "select[name^='country']", function () {
        var id_country = $(this).val();
        var el = $(this); // 缓存当前选择的 country select 元素
        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) {
                // 使用 closest() 找到最近的 <tr> 父元素，然后使用 find() 找到该行中的 state select 元素
                el.closest("tr").find("select[name^='state']").html('');
                el.closest("tr").find("select[name^='state']").html(data.options);
            }
        });
    });
});

代码解释：

var el = $(this);：这行代码将当前触发 change 事件的 select 元素（即选择的国家下拉框）缓存到变量 el 中。
el.closest("tr")：这行代码从当前 select 元素开始，向上查找最近的父元素，也就是当前行。
el.closest("tr").find("select[name^='state']")：这行代码在当前行中查找 name 属性以 "state" 开头的 select 元素，也就是当前行的省份下拉框。
el.closest("tr").find("select[name^='state']").html(data.options);：这行代码将从服务器返回的省份选项数据更新到当前行的省份下拉框中。

通过这种方式，可以确保每个下拉框只更新对应行的状态选项，从而解决多行数据联动错误的问题.

因赛AIGC解决营销全链路应用场景

280

查看详情

完整代码示例

以下是完整的 create.blade.php 文件示例，包含了修改后的 J*aScript 代码：

<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/j*ascript">
        $(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>

以下是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代码示例：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class YourController extends 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]);
        }
    }
}