监听$form->select('department_id')表单项，动态获取数值填入 $form->text('department_nums')失败

问答 / 0 / 3 / 创建于 1年前

代码 1#

$form->select('department_id')->options(\App\Models\Department::pluck('name', 'id'))->required()->rules([$unique_rule]);
$form->text('department_nums')->required()->rules([$unique_rule]);

代码 2#

public function getHeadcount(Request $request)
{
    $id = $request->input('id');

    $department = Department::find($id);

    if (!$department) {
        return response()->json([
            'code' => 1,
            'msg' => 'department does not exit',
        ]);
    }
    return response()->json([
        'code' => 0,
        'data' => [
            'headcount' => $department->headcount,
        ],
    ]);
}

代码 3#

<script>
        $('#department_id').on('change',function(e){
            $.ajax({
                method: "get",
                url: "/get_headcount?id="+e.target.value,
                success: function (data) {
                    if (data.code === 0) {
                        $('#department_nums').val(data.data.headcount);
                    } else {
                        alert(data.msg);
                    }
                },
                error: function () {
                    alert('获取部门人数失败');
                }
            });
        });
    </script>

要监听选择表单 select (‘department_id’)，动态获取 department 的 headcount 字段值，回填到 text (‘department_nums’)，但不成功，尝试过调整 script 代码的位置，也修改成下面这种#

$form->script = <<<EOT
            $('#department_id').on('change',function(e){
                $.ajax({
                    method: "get",
                    url: "/get_headcount?id="+e.target.value,
                    success: function (data) {
                        if (data.code === 0) {
                            $('#department_nums').val(data.data.headcount);
                        } else {
                            alert(data.msg);
                        }
                    },
                    error: function () {
                        alert('获取部门信息失败');
                    }
                });
            });
            EOT;

但都不成功。本人菜鸟，请高手指点一下，该如何修改代码。测试直接执行 get_headcount?id=11 是能正常获取到数据的。#

laravel

0 声望

偷偷学习ing

《L05 电商实战》

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

《G01 Go 实战入门》

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

推荐文章：

更多推荐...

用 Laravel12 Startkit 做了一个 composer 私有包托管平台 😂 点赞超过 20 个开源，看看需要的人多不多 27 / 19 |

花了四个月打磨的 Laravel Plus 开源 30 / 98 |

试用 Laravel + 树莓派搭建视频监控，并支持线上访问 26 / 19 |

在laravel下实现全双工的websocket开发 21 / 8 |

无需修改任何代码和扩展将你的Laravel项目性能提高20倍 101 / 98 |

Laravel 实用小技巧——缓存标签的小秘密（下） 12 / 11 |

讨论数量: 3

快乐的皮拉夫

版主 1.9k 声望

确保 select 下拉的 change 事件能被正常监听：事件方法入口加个打印日志，切换选项看能否正常输出；
确保 ajax 能正常请求到数据：请求成功后打印 data.data.headcount 能正常输出；
确认 textarea 标签赋值方法是否正确？用 $('#department_nums').text(data.data.headcount) 赋值试一下。如果还不行的话，看下控制文本框显示的是哪个元素，根据那个元素的类型使用对应的方法赋值。

1年前评论

dgbjleo

0 声望

第一点的 change 事件监测不到

如果 select 下拉已经有一个 change 事件了，是不是增加的 change 事件就不能使用了吧？

1年前评论

dgbjleo

0 声望

改成这样，貌似也不行。

$form->script =
            <<<JS
var departmentSelect = $("select[name='department_id']");

// 监听 department_id 的变化
departmentSelect.change(function() {
    // 发送 Ajax 请求获取对应的记录
    $.ajax({
        url: "/get_headcount?id="+e.target.value,
        type: 'GET',
        dataType: 'json',
        data: {department_id: departmentSelect.val()},
        success: function(data) {
            // 填充 department_nums 控件
            $("input[name='department_nums']").val(data.headcount);
        }
    });
});
JS;

1年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助