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

代码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是能正常获取到数据的。

《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 3
  1. 确保 select 下拉的 change 事件能被正常监听:事件方法入口加个打印日志,切换选项看能否正常输出;
  2. 确保 ajax 能正常请求到数据:请求成功后打印 data.data.headcount 能正常输出;
  3. 确认 textarea 标签赋值方法是否正确?用 $('#department_nums').text(data.data.headcount) 赋值试一下。如果还不行的话,看下控制文本框显示的是哪个元素,根据那个元素的类型使用对应的方法赋值。
11个月前 评论

第一点的change事件监测不到

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

11个月前 评论
改成这样,貌似也不行。
$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;
11个月前 评论

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