laravel - 基于先前选择的动态下拉列表

Posted 2023-02-24

【中文标题】laravel - 基于先前选择的动态下拉列表

【英文标题】：laravel - dynamic dropdown list based on previous selection

【发布时间】：2016-02-13 02:45:55

【问题描述】：

我有一个从我的数据库中填充的下拉列表，但我正在尝试创建一个基于第一个列表选择的第二个下拉列表。

第二个下拉列表内容有一个指向第一个下拉列表内容的 FK：

 project table         assignment table
 id|project_name       id|project_id|labour_type
  1|abc                 1|         1|....
  2|def                 2|         1|....
  3|..                  3|         2|....

我正在生成第一个下拉列表 -

控制器：

$projects = DB::table('project')->lists('project_name', 'id');

表格：

!! Form::select('project', $projects) !!

我什至不知道如何为第二个下拉菜单启动控制器查询。

我是 laravel/php 的新手，但对 jQuery/ajax 完全不熟悉，我知道我必须使用它来避免刷新页面以更新第二个下拉列表。任何帮助表示赞赏。

编辑：让两个下拉列表都是来自分配表的查询，并找到不同的方式在第一个下拉列表中显示项目名称是否有意义？

谢谢。

【问题讨论】：

两种可能的解决方案：1) 使用 ajax 2) 或者使用下拉更改事件并预先填充数据库中的数据。

使用 ajax 我可以过滤我的数据库查询吗？对不起，我从来没有使用过ajax。如果我只是拉出所有分配并将它们放在下拉列表中，我可以使用 ajax 仅在从上一个下拉列表中选择的项目的 id 上显示加入项目和分配表的那些？

是的，学习 ajax。这不是那么难。如果你有 jQuery 的知识，那不会花太多时间。

我不了解 jquery，但知道我可以在 mysql 上使用 ajax 就足以让我入门，谢谢

【参考方案1】：

我刚刚看到你的问题，所以我会尽力回答。

首先，您需要在您的第一个 select 元素上收听 change 事件，不确定它是什么，因为它不在问题中，但现在我将其称为 dropdown-1，例如<select id="dropdown-1"></select>

$(document).on('change', '#dropdown-1', updateDropdown2);

它的作用是在dropdown-1 中的值发生变化时调用updateDropdown2 函数。

var statusChanger = function () 

    var $select = $(this); // the select menu that was changed
    var projectID = $select.val();

    // send ajax request
    $.ajax(
        type: 'get',
        url:'/controller/action',
        data: 
            project_id: projectID
        ,
        success: function(data) 

            var options = '';
            // you might want an empty option, so you could do
            // var options = '<option value=""></option>';

            // assuming that your data is being return as json
            $.each(data, function(i, item) 
                // loop through the json and create an option for each result
                options += '<option value="' + item.id + '">' + item.labour_type + '</option>';
            );

            // update dropdown 2
            $('#dropdown-2).empty().html(options);
            // the empty isn't needed since
            // .html() will replace the contents
            // but it's just to make it obvious what is happening

        
    );

这里我在一些变量前面加上$ 符号，这只是一些人用来表示元素包含jQuery 对象的约定，而不仅仅是字符串、整数等。

您需要实施的一些事情：

ajax 请求的路由（例如，将url:'/controller/action', 替换为您在路由文件中定义的实际网址 记得在页面中包含 jQuery 库

用于处理 ajax 请求的控制器和操作，示例如下：

public function getLabourTypes(Request $request)


    $labourTypes = LabourType::where('project_id', $request->project_id)->orderBy('labour_type', 'asc')->get();

    return $labourTypes->toJson();

请注意，我根本没有对此进行测试，因此可能会出现一些错误，但它应该可以帮助您了解您想要实现的大部分内容。