laravel-基于先前选择的动态下拉列表 [英] laravel - dynamic dropdown list based on previous selection

问题描述

我有一个从数据库中填充的下拉列表，但是我试图根据第一个列表选择创建第二个下拉列表.

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

 项目表分配表id | project_name id | project_id | labour_type1 | abc 1 |1 |....2 | def 2 |1 |....3 | .. 3 |2 | .... 

我通过-生成了第一个下拉列表

控制器:

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

表格:

  {!!形式:: select('project'，$ projects)!!} 

我不确定如何开始第二个下拉菜单的控制器查询.

我是laravel/php的新手，但对jQuery/ajax一点都不熟悉，我知道这将是我必须使用的，以避免必须刷新页面来更新第二个下拉列表.感谢您的帮助.

将两个下拉列表都作为赋值表中的查询，并在第一个下拉列表中找到一种不同的方式来显示项目名称是否有意义?

谢谢.

解决方案

我刚刚看到了您的问题，所以我会尽力尝试并回答.

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

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

只要 dropdown-1 中的值发生更改，这就是调用 updateDropdown2 函数.

  var statusChanger = function(){var $ select = $(this);//已更改的选择菜单var projectID = $ select.val();//发送ajax请求$ .ajax({类型:获取"，网址:"/controller/action"，数据: {project_id:projectID}，成功:功能(数据){var options ='';//您可能需要一个空选项，所以您可以//var options ='< option value ="></option>';;//假设您的数据以json的形式返回$ .each(data，function(i，item){//遍历json并为每个结果创建一个选项options + ='< option value ='+ item.id +'">'+ item.labour_type +'</option>';});//更新下拉菜单2$('#dropdown-2).empty().html(options);//因为不需要空//.html()将替换内容//但只是为了清楚说明正在发生的事情}});} 

在这里，我为某些变量添加了 $ 符号，这只是一些人用来表示该元素包含jQuery对象的约定，而不仅仅是字符串，整数等./p>

您需要实现一些事情:

• 用于ajax请求的路由(例如，将 url:'/controller/action'>替换为您在路由文件中定义的实际网址
• 记住要在页面上包含jQuery库

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

   公共函数getLabourTypes(Request $ request){$ labourTypes = LabourType :: where('project_id'，$ request-> project_id)-> orderBy('labour_type'，'asc')-> get();返回$ labourTypes-> toJson();} 

请注意，我根本没有测试过，因此可能会出现一些错误，但是它应该可以让您最大程度地了解要实现的目标.

I have a dropdown list that is being populated from my database, but I am trying to make a 2nd dropdown list that is based on the first lists selection.

The 2nd dropdown lists contents have an FK pointing to the contents of the first drop down list:

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

I am generating the first dropdown by -

Controller:

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

Form:

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

I am not sure how to even start a controller query for the 2nd dropdown.

I am new to laravel/php but not familiar at all with jQuery/ajax, and I know it will be what I have to use to avoid having to refresh the page to update the 2nd dropdown. Any help is appreciated.

edit: Would it make sense to have both dropdowns be queries from the assignment table, and find a different way to display the project name in the first dropdown?

Thanks.

解决方案

I've just seen your question, so I'll do my best to try and answer.

First off, you need to listen to the change event on your first select element, not sure what it is since it's not in the question but for now I'll call it dropdown-1, e.g. <select id="dropdown-1"></select>

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

What this does is call the updateDropdown2 function whenever the value in dropdown-1 changes.

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

        }
    });
}

Here I am prefixing some variables with a $ sign, this is just a convention that some people use to signify that the element contains a jQuery object, rather than just a string, integer etc.

Some things you'll need to implement:

• a route for the ajax request (e.g. replace url:'/controller/action', with the actual url you define in your routes file
• remember to include the jQuery library on your page

• a controller and action to handle the ajax request, example below:

  public function getLabourTypes(Request $request)
  {
  
      $labourTypes = LabourType::where('project_id', $request->project_id)->orderBy('labour_type', 'asc')->get();
  
      return $labourTypes->toJson();
  }
  

Please note I've not tested this at all so there may be some mistakes but it should get you most of the way to what you are trying to implement.

这篇关于laravel-基于先前选择的动态下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！