CODEWITHSUNDEEP
jquerymysqlformslaraveldropdown
Arthur
Arthur

Reputation: 3962

laravel - dynamic dropdown list based on previous selection

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.

Upvotes: 2

Views: 2952

Answers (1)

martincarlin87
martincarlin87

Reputation: 11042

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.

Upvotes: 1

Related Questions