Dependent Dropdown List with Jquery in Laravel 5.1

In this tutorial, we are going to do a simple, straightforward dependent dropdown list using jQuery and Laravel 5.1. This tutorial is oriented toward beginners, so there will be a lot of granular detail, gists are provided for views. Intermediate programmers can skip ahead.

Also note I heavily referenced this video for the jquery part. Even though the video is written for Laravel 4.2, I was able to use the jquery part almost exactly.

To make our example as useful as possible, we are going to use category and subcategory as our parent/child relationship. We are going to use both a Category model and a Subcategory model, so if you wish to follow along, create those models and migrations now.

You can customize your data structure however you wish to suit your needs, but to follow my example, you have to have an autoincrement id and a category_name column for the categories table, and for the subcategories table, you will need an autoincrement id, a subcategory_name column, and a category_id column.

For your convenience, I will provide the up and down functions for use in a migration:

public function up()
{
   Schema::create('categories', function (Blueprint $table) {
       $table->increments('id');
       $table->string('category_name')->unique();
       $table->timestamps();
   });

   Schema::create('subcategories', function (Blueprint $table) {
       $table->increments('id');
       $table->string('subcategory_name')->unique();
       $table->integer('category_id')->unsigned();
       $table->timestamps();
   });
}

public function down()
{

   Schema::drop('categories');
   Schema::drop('subcategories');
}