master_admin's avatar

Dependent Dropdown Help.

Hello, I am a beginner at laravel and followed some tutorials and created something, but I need some help regarding finalising it, I created a flow where sections have many years > years have many months > months have many days so at the time of days, create / edit I am not able to find which month I am selecting because I called all months inside the dropdown,

so I found a solution is a dependent dropdown in which the user first has to select a section and then a year and then month which only belongs to year which is selected by user

how can I do it. note- use of jquery is preferred but optional. Thank you so much for your attention and participation.

0 likes
10 replies
vincent15000's avatar

You have to write controller methods that return the datas you need (section, year, month, ...).

First you load the sections at the same time the page loads.

When a section is selected, you load the years via jquery/ajax calling your controller method to get years. And when a year is selected, you load the months via jquery/ajax calling your controller method to get months.

1 like
vincent15000's avatar

@master_admin Here are some explanations.

Select 1 : sections You set an event on the selection of a section.

$('your_sections_select').on('change', function(e) {
	// Here you can retrieve the id of the selected section if needed
	$section_id = e.target.value;
	// Here you get the needed years
	// If you need to send the section_id, you can either add this value as an URL parameter, or using post instead of get
	$.get( "route_to_get_the_years", function(data) {
  		// Here you fill the options of your years select using the data retrieved
		$("your_years_select")...
		// And here you log some information to confirm the action is ok
  		console.log("Load was performed.");
	});
});

And you can apply the same logic when you select a year to display the months list.

Here is some documentation about jQuery get().

https://api.jquery.com/jquery.get/

1 like
vincent15000's avatar

@master_admin Yes sure, I use Livewire and I'm ok to say that Livewire solves this problem easily, but you asked to use jQuery.

1 like
master_admin's avatar

@vincent15000 yes I mentioned it, but also said it is optional, no worries, logic solved that is the most imp thing..

1 like
master_admin's avatar

@vincent15000 in my case levels 1 and 2 are working fine, but not level 3. I don't know y this problem is created. Can you please help me with that..?

1 like
vincent15000's avatar

@master_admin I cannot help you if you don't show your code or give some more information. Have you emitted the appropriated events ?

1 like
master_admin's avatar

@vincent15000

Section::factory(50)->create()->each(function ($section) { Saal::factory(50)->create(['section_id' => $section->id])->each(function ($saal) { Mahina::factory(12)->create(['saal_id' => $saal->id])->each(function ($mahina) { Din::factory(31)->create(['mahina_id' => $mahina->id]); }); }); });

can you optimize this, this took 1 hour of time to seed.

1 like

Please or to participate in this conversation.