mousumi_mou's avatar

Dependent / Cascading Dropdown for multiple ( model,table,controller)

I have two migration table in a database named "2018_09_26_152831_create_all_drivers_table" & "2018_09_26_141623_create_all_routes_table". There are different model ( "AllDriver.php" & "AllRoute.php") and controller ( "AllDriverController.php" & "AllRouteController.php" ) for these two different table. There are also another migration table named "2018_09_26_144829_create_all_buses_table". for this table I also have similar model & controller too. In the "allbus.create" page I have two dropdown field named "Select Route" and "Select Driver". Here I want to get the Driver Name on behalf of selecting route no.

So can anyone please tell me the process, how can I build it successfully using Ajax or something else..?

[ For more details : https://stackoverflow.com/questions/52782844/dependent-cascading-dropdown-for-multiple-model-table-controller ]

0 likes
6 replies
Cronix's avatar

Are you using any sort of javascript/ajax library now, like axios or jQuery or something?

Conceptually, you'd have something like

<select id="route">
  // options for route
</select>

<select id="drivers">
</select>
  1. You'd listen to an onChange event on select#route
  2. When onChange triggers, submits value from select#route to a route/controller
  3. Controller will then return a json array of id/name pairs of the drivers
  4. Clear current options from select#drivers
  5. Loop over that array to create the new <option>s and insert them into select#drivers.

How you'd do all of that depends on whatever js libraries you're using.

D9705996's avatar

@mousumi_mou - you are going to need to initially populate the routes dropdown from your backend. Then add an onChange event listener to the dropdown that sends an AJAX request to a URL route on your backend that accepts the route_id that was selected and returns the driver data for that specific route which then updates the driver dropdown.

You can find an example here

https://programmingpot.com/laravel/dependent-droop-down-in-laravel/

Cronix's avatar

That's a big question. Let's start with what js libraries you're currently using, if any?

Cronix's avatar

Do you now how to use javascript? You're not asking a quick/easy question to answer. If you only need ajax, I'd look at axios. https://www.npmjs.com/package/axios

If this is overly complex, I'd turn it into a 2 step process and not use ajax.

Page one is a regular form that has the initial dropdown for the driver. They select a value in the dropdown and submit. Then use the value submitted to retrieve the route values for 2nd dropdown and populates a new form.

Please or to participate in this conversation.