原创投稿
  1. 创想鸟首页
  2. 用户投稿

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

程序猿 • • 用户投稿

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

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

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

问题分析

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

解决方案

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

以下是修改后的 JavaScript 代码：

$(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: "",            method: 'GET',            dataType: 'json',            data: { id_country: id_country, _token: token },            success: function (data) {                // 使用 closest() 找到最近的  父元素，然后使用 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);：这行代码将从服务器返回的省份选项数据更新到当前行的省份下拉框中。

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

完整代码示例

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

                    
        
            Country            State        
        
                                                -- Select Project --                    @foreach ($countries as $key => $value)                    {{ $value }}                    @endforeach                                                                            -- Sub Head--                                                
    
            $(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: "",                    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);                    }                });            });        });                let initializeSelect2 = function () {            $('.js').select2();        }        var i = 0;        $("#add12").click(function () {            ++i;            $("#dynamicTable12").append('  --select--@foreach ($countries as $key => $value){{ $value }}@endforeach  -- Sub Head--');            initializeSelect2()        });        $(document).on('click', '.remove-tr', function () {            $(this).parents('tr').remove();        });        $(document).ready(function () {            initializeSelect2()        });

以下是ajax-select.blade.php代码示例：

--- Select Sub-Head ---@if(!empty($states))  @foreach($states as $key => $value)    {{ $value }}  @endforeach@endif

以下是Controller代码示例：

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

注意事项：

确保 jQuery 库已正确引入。根据实际情况修改 route(‘select-ajax’) 为正确的路由地址。ajax-select.blade.php 文件用于渲染从服务器返回的省份选项数据。项目中需要安装select2插件。

总结

通过修改 JavaScript 代码，可以解决 Laravel 中动态添加依赖下拉框时出现的多行数据联动错误问题。关键在于准确地定位到当前行的省份下拉框，并只更新该下拉框的内容。希望本文档能够帮助开发者快速解决类似问题，提高开发效率。

以上就是Laravel 动态添加依赖下拉框：解决多行数据联动问题的详细内容，更多请关注php中文网其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1337012.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
Laravel Blade模板中基于角色的视图访问控制指南
上一篇 2025年12月12日 22:41:04
PHP str_ireplace 多关键词匹配与默认分类逻辑的优化实践
下一篇 2025年12月12日 22:41:09

相关推荐

  • 多核处理器在运行单线程任务时为何表现不佳？

    多核处理器在运行单线程任务时为何表现不佳？多核处理器在运行单线程任务时为何表现不佳？多核处理器在运行单线程任务时为何表现不佳？多核处理器在运行单线程任务时为何表现不佳？

    多核处理器在运行单线程任务时表现不佳，根本原因在于任务的串行性使其无法并行执行，即便拥有更多核心也难以提升性能。1. 单线程任务只能在一个核心上运行，其他核心无法参与；2. 任务内部存在严格的顺序依赖（如A→B→C），导致无法拆分并行处理；3. 根据Amdahl定律，程序加速比受限于串行部分比例，纯…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    400

  • Laravel中collection类的使用方法总结（代码）

    Laravel中collection类的使用方法总结（代码）Laravel中collection类的使用方法总结（代码）Laravel中collection类的使用方法总结（代码）Laravel中collection类的使用方法总结（代码）

    Laravel 的 Collection 类其实有很多非常实用的方法，对于我们在优化循环的时候非常的有用，我们的目标就是：不再写 foreach 循环！这篇文章给大家分享的内容是关于Laravel中collection类的使用方法总结（代码），内容很详细，有一定的参考价值，希望可以帮助到有需要的朋友…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • ️「领域驱动设计」Java微服务拆分策略与界限上下文划分

    ️「领域驱动设计」Java微服务拆分策略与界限上下文划分️「领域驱动设计」Java微服务拆分策略与界限上下文划分️「领域驱动设计」Java微服务拆分策略与界限上下文划分️「领域驱动设计」Java微服务拆分策略与界限上下文划分

    微服务拆分的核心在于通过领域驱动设计（DDD）识别业务的“自然边界”，其中界限上下文（Bounded Context）是关键。它强调从业务语言和领域专家沟通出发，而非技术视角，确保服务高内聚、低耦合。通过事件风暴、通用语言、业务能力分析等方法识别界限上下文，并结合团队结构与上下文映射明确服务边界。在…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    000
  • Laravel的功能测试：测试驱动开发（附代码） 用户投稿

    Laravel的功能测试：测试驱动开发（附代码）

    本篇文章给大家带来的内容是关于laravel的功能测试：测试驱动开发（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 创建carousel功能测试 在对你的项目进行功能测试的时候，一定要确保管理后台的功能测试要与前台的功能测试隔离开来。在本例中，我通过命名空间Admin和F…

    程序猿的头像 程序猿
    2026年9月26日
    200

  • PHP中动态设置HTML 背景色的正确实践

    <img src="https://img.php.cn/upload/article/001/246/273/175965168921241.jpg" alt="php中动态设置html 背景色的正确实践”>背景色的正确实践” /&…

    程序猿的头像 程序猿
    用户投稿 2026年9月26日
    000
  • Laravel服务容器的绑定与解析 用户投稿

    Laravel服务容器的绑定与解析

    本篇文章给大家带来的内容是关于laravel服务容器的绑定与解析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 前言   老实说，第一次老大让我看laravel框架手册的那天早上，我是很绝望的，因为真的没接触过，对我这种渣渣来说，laravel的入门门槛确实有点高了，但还是得硬着头…

    程序猿的头像 程序猿
    2026年9月26日
    100

  • 小红书网页版怎么安全退出_小红书网页版账号安全退出教程

    小红书网页版怎么安全退出_小红书网页版账号安全退出教程小红书网页版怎么安全退出_小红书网页版账号安全退出教程小红书网页版怎么安全退出_小红书网页版账号安全退出教程小红书网页版怎么安全退出_小红书网页版账号安全退出教程

    小红书网页版安全退出需点击右上角头像，在下拉菜单中选择“退出登录”，退出后建议清除浏览器缓存与历史记录，并关闭无痕浏览窗口，同时定期修改密码、开启短信验证以提升账号安全性。 小红书网页版怎么安全退出？这是不少网友在使用公共设备或共享电脑时常关注的问题，接下来由PHP小编为大家带来小红书网页版账号安全…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    200

  • Maven进阶实战：多模块项目依赖管理与冲突解决

    Maven进阶实战：多模块项目依赖管理与冲突解决Maven进阶实战：多模块项目依赖管理与冲突解决Maven进阶实战：多模块项目依赖管理与冲突解决Maven进阶实战：多模块项目依赖管理与冲突解决

    答案：Maven多模块项目依赖管理核心在于父POM中使用统一版本、合理划分模块实现高内聚低耦合、通过排除冲突传递依赖，并利用mvn dependency:tree等工具分析依赖树，结合BOM引入、版本属性化管理等策略，确保依赖一致性与项目可维护性。 Maven多模块项目中的依赖管理与冲突解决，核心在…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    300
  • laravel框架中超实用的功能介绍 用户投稿

    laravel框架中超实用的功能介绍

    本篇文章给大家带来的内容是关于laravel框架中超实用的功能介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 让lumen的dd() dump()像laravel一样优雅 composer require symfony/var-dumper 获取执行的sql语句 可查看sql…

    程序猿的头像 程序猿
    2026年9月26日
    000

  • Java泛型陷阱：Pair中List类型丢失问题及解决方案

    Java泛型陷阱：Pair中List类型丢失问题及解决方案Java泛型陷阱：Pair中List类型丢失问题及解决方案Java泛型陷阱：Pair中List类型丢失问题及解决方案Java泛型陷阱：Pair中List类型丢失问题及解决方案

    本文探讨了在Java中使用包含List的Pair时，若迭代循环中未正确使用泛型，可能导致List类型信息丢失的问题。核心在于，使用裸类型（Raw Type）的Pair会导致其内部泛型参数被擦除为Object，从而无法访问List特有的方法。解决方案是在循环声明中明确指定泛型类型，以确保编译时类型安全…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    300

  • laravel框架的中间件middleware的详解

    laravel框架的中间件middleware的详解laravel框架的中间件middleware的详解laravel框架的中间件middleware的详解laravel框架的中间件middleware的详解

    本篇文章给大家带来的内容是关于laravel框架的中间件middleware的详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 laravel中间件是个非常方便的东西，能将一些逻辑实现解耦，并且在laravel中，中间件的编写也是非常的方便。谁用谁知道。 1.装饰器模式 lara…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    100

  • 使用泛型解决Pair中List无法访问的问题

    使用泛型解决Pair中List无法访问的问题使用泛型解决Pair中List无法访问的问题使用泛型解决Pair中List无法访问的问题使用泛型解决Pair中List无法访问的问题

    本文介绍了在使用 javatuples 库中的 Pair 类时，当 Pair 的第二个元素是 List 类型，并且在循环中访问该 List 时，可能遇到的无法访问 List 的 size() 方法或元素的问题。通过在循环中使用泛型来明确 Pair 中 List 的类型，可以有效解决此问题，确保 Li…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    100

  • firefox官网首页入口 火狐浏览器手机版免费下载地址

    firefox官网首页入口 火狐浏览器手机版免费下载地址firefox官网首页入口 火狐浏览器手机版免费下载地址firefox官网首页入口 火狐浏览器手机版免费下载地址firefox官网首页入口 火狐浏览器手机版免费下载地址

    火狐浏览器官网首页入口是https://www.mozilla.org/zh-CN/firefox/new/，该页面提供手机版免费下载链接，并介绍其核心特性如阻止跟踪器、沙盒技术、多设备同步和隐私浏览模式。 firefox官网首页入口在哪里？这是不少网友都关注的，接下来由PHP小编为大家带来火狐浏览…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    100

  • Java中Pair嵌套List时泛型丢失问题解析与最佳实践

    Java中Pair嵌套List时泛型丢失问题解析与最佳实践Java中Pair嵌套List时泛型丢失问题解析与最佳实践Java中Pair嵌套List时泛型丢失问题解析与最佳实践Java中Pair嵌套List时泛型丢失问题解析与最佳实践

    本文深入探讨了在Java中使用org.javatuples.Pair嵌套List时，因不当使用泛型（即使用原始类型）导致List功能异常的问题。通过分析原始类型Pair在增强型for循环中的行为，揭示了类型擦除如何影响内部List的访问。文章提供了正确的泛型使用方式，确保在迭代过程中List的类型信…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    200
  • Larave框架下Contracts契约的解析 用户投稿

    Larave框架下Contracts契约的解析

    本篇文章给大家带来的内容是关于larave框架下contracts契约的解析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 Contracts Laravel 的契约是一组定义框架提供的核心服务的接口， 例如我们在介绍用户认证的章节中到的用户看守器契约IllumninateCont…

    程序猿的头像 程序猿
    2026年9月26日
    100
  • laravel如何创建自定义的Artisan命令_Laravel自定义Artisan命令教程 用户投稿

    laravel如何创建自定义的Artisan命令_Laravel自定义Artisan命令教程

    答案：在 Laravel 中创建自定义 Artisan 命令可自动化常用任务，使用 make:command 生成命令类，配置 signature 和 description 属性定义调用方式与描述，于 handle() 方法编写逻辑，通过 argument() 和 option() 获取参数与选项…

    程序猿的头像 程序猿
    2026年9月26日
    100

  • sublime怎么给vue文件设置高亮_sublime Vue文件语法高亮设置

    sublime怎么给vue文件设置高亮_sublime Vue文件语法高亮设置sublime怎么给vue文件设置高亮_sublime Vue文件语法高亮设置sublime怎么给vue文件设置高亮_sublime Vue文件语法高亮设置sublime怎么给vue文件设置高亮_sublime Vue文件语法高亮设置

    Sublime Text 默认不支持 Vue 文件的语法高亮，但可以通过安装插件来实现。Vue 文件是混合语法（HTML、JavaScript、CSS），需要专门的语法定义才能正确高亮。以下是设置步骤： 1. 安装 Package Control（如未安装） 如果还没安装 Package Contr…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    100
  • Java中InterruptedException与线程中断配合使用 用户投稿

    Java中InterruptedException与线程中断配合使用

    InterruptedException是Java中用于线程中断的检查异常，当线程在阻塞操作中被中断时抛出；调用interrupt()方法仅设置中断状态，线程需自行响应；常见可中断方法包括sleep、wait、join等；捕获该异常后应恢复中断状态或进行清理并退出；错误地忽略异常会导致中断信号丢失，…

    程序猿的头像 程序猿
    2026年9月26日
    100
  • Laravel框架中Pipeline的解析（代码示例） 用户投稿

    Laravel框架中Pipeline的解析（代码示例）

    本篇文章给大家带来的内容是关于laravel框架中pipeline的解析（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 大家好，今天给大家介绍下Laravel框架的Pipeline。 它是一个非常好用的组件，能够使代码的结构非常清晰。 Laravel的中间件机制便是基于…

    程序猿的头像 程序猿
    2026年9月26日
    100

  • 云原生Java监控全套方案：从Micrometer到Grafana可视化看板

    云原生Java监控全套方案：从Micrometer到Grafana可视化看板云原生Java监控全套方案：从Micrometer到Grafana可视化看板云原生Java监控全套方案：从Micrometer到Grafana可视化看板云原生Java监控全套方案：从Micrometer到Grafana可视化看板

    云原生Java监控方案以Micrometer收集指标，Prometheus存储查询，Grafana实现可视化。Micrometer提供供应商中立的API，与Spring Boot Actuator集成，自动暴露JVM、HTTP等指标；通过micrometer-registry-prometheus依…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    100

发表回复

登录后才能评论
关注微信