Зависимые выпадающие списки на примере приложения на Laravel

В веб разработке иногда попадаются задачи, в которых необходимо создавать зависимые выпадающие списки. Есть два списка, первый, например выбор свойства товара, второй список это список значений этого свойства. Например, у нас есть двух уровневый список категорий и подкатегорий. При выборе категории в первом списке, необходимо подгрузить подкатегории выбранной категории во втором списке.

Имя нашей таблицы categoriesи поля id, name, parent_id. Если категория main, то parent_idона будет равна нулю, а для подкатегории-parent_idидентификатору родительской категории. 

id   name       parent_id
------------------------
1    Book       0
2    Text Book  1
3    Novel      1

Определение Маршрута

Добавьте 2 маршрута в файл маршрута. Один для показа формы с выпадающим списком, а другой для JSON API.

Route::get('/dropdown','DropdownController@index');
Route::get('/dropdown-data','DropdownController@data');

Контроллер для формы и данных для выпадающего списка

Сделайте контроллер для рендеринга формы с выпадающими списками и методом API для ajax-запроса, который будет запрашивать данные для второго списка.

php artisan make:controller DropdownController

Теперь код в DropdownController для создания зависимого выпадающего списка.

<?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Category;

class DropdownController extends Controller
{

    public function index()
    {
        $categories = Category::where('parent_id',0)->get();
        return view('dropdown',compact('categories'));
    }

    public function data(Request $request){

        if($request->has('cat_id')){
            $parentId = $request->get('cat_id');
            $data = Category::where('parent_id',$parentId)->get();
            return ['success'=>true,'data'=>$data];
        }

    }

}

Форма

Создайте dropdown.blade.phpфайл в папке resource/views. Если вы не включили jQuery в свой проект, то сначала включите jQuery.

@extends('app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h3>Dependent Dropdown</h3>
                <hr>
                <div class="form-group">
                    <label>Category</label>
                    <select class="form-control input-sm" name="category_id">
                        <option value="">--select--</option>
                        @foreach ($categories as $row)
                            <option value="{{$row->id}}">{{$row->name}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" style="position:relative">
                    <label>Sub-Category</label>
                    <select class="form-control input-sm" name="subcategory_id"></select>
                    <img id="loader" src="{{url('/images/ajax-loader.gif')}}" alt="loader">
                </div>

            </div>
        </div>
    </div>

    <style>
        #loader {
            position: absolute;
            right: 18px;
            top: 30px;
            width: 20px;
        }
    </style>
    <script>
        $(function () {
            var loader = $('#loader'),
                category = $('select[name="category_id"]'),
                subcategory = $('select[name="subcategory_id"]');

            loader.hide();
            subcategory.attr('disabled','disabled')

            subcategory.change(function(){
                var id = $(this).val();
                if(!id){
                    subcategory.attr('disabled','disabled')
                }
            })

            category.change(function() {
                var id= $(this).val();
                if(id){
                    loader.show();
                    subcategory.attr('disabled','disabled')

                    $.get('{{url('/dropdown-data?cat_id=')}}'+id)
                        .success(function(data){
                            var s='<option value="">---select--</option>';
                            data.forEach(function(row){
                                s +='<option value="'+row.id+'">'+row.name+'</option>'
                            })
                            subcategory.removeAttr('disabled')
                            subcategory.html(s);
                            loader.hide();
                        })
                }

            })
        })
    </script>
@endsection​

Важно! Не лепите js код в шаблон. Перенесите в app.js

Если все сделано верно, то получится следующее