Как добавить выпадающее меню на основе другого выпадающего меню, используя вызов Ajax в Laravel?

Question

У меня есть два выпадающих поля, которые основаны друг на друге Класс и раздел. Я хочу

Select * from sections where class_id=selected Class Id.

Я использовал java-скрипт для управления этим, но он не работает для меня.

Мои раскрывающиеся поля

     <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-6">
                <label>Category</label>
                <select class="form-control" name = "class">
                    <option value="0">Please Select Category</option>
                    @foreach($classses as $classs)
                        <option value="{{$classs->id}}">{{$classs->title}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div>
            <div class="col-md-6">
                <label>Products</label>
                <select class="form-control" name = "section">
                    <option value="0">Please Select Product</option>
                    @foreach($sections as $section)
                        <option value="{{$section->id}}">{{$section->title}}</option>
                    @endforeach

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

JavaScript

<script>
jQuery(document).ready(function ($) {
    $('select[name=classs]').on('change', function () {
        var selected = $(this).find(":selected").attr('value');
        $.ajax({
            url: base_url + '/classs/'+selected+'/sections/',
            type: 'GET',
            dataType: 'json',

        }).done(function (data) {

            var select = $('select[name=section]');
            select.empty();
            select.append('<option value="0" >Please Select Product</option>');
            $.each(data,function(key, value) {
                select.append('<option value=' + key.id + '>' + value.title + '</option>');
            });
            console.log("success");
        })
    });
});

Маршрут

Route::get('/dropdown','DropDownController@index'); 
Route::get('classs/{id}/sections', 'DropDownController@getSection');

Выпадающий контроллер

 public function index(){

    $classses = Classs::all();
    $sections =Section::all();

    return view('classs.a', compact('classses','sections'));
}



   public function getSection($id){
    if($id!=0){

        $sections = Classs::find($id)->sections()->select('id', 'title')->get()->toArray();
    }else{
        $sections = Section::all()->toArray();
    }
    return response()->json($sections);
}
}

Класс модальный

  class Classs extends Model
{
//
    protected $fillable = [
    'id',
    'title',

];

public function section()
{
    return $this->hasMany('App\Section');

}

  }

Секция модальная

          class Section extends Model
{
//
protected $fillable = [
    'id',
    'title',
    'class_id',  //foreign key of Classs
    'user_id',

];

public function classs()
{
    return $this->belongsTo('App\Classs');
}

Но на самом деле, когда я получаю результат, он получает все классы и все секции. Это может быть какая-то ошибка в синтаксисе. Я так застрял. Пожалуйста, помогите мне в этом случае.

Answer 1

Сначала необходимо убедиться, что ваш JS вызывается напрямую.

Добавьте пару console.log вызовов в сценарий:

<script>
jQuery(document).ready(function ($) {
    console.log('listening for change event', $('select[name=classs]')[0]);

    $('select[name=classs]').on('change', function () {
        var selected = $(this).find(":selected").attr('value');
        console.log('change event fired. selected value:', selected);
        $.ajax({
            url: base_url + '/classs/'+selected+'/sections/',
            type: 'GET',
            dataType: 'json',

        }).done(function (data) {
            console.log('ajax response', data);

            var select = $('select[name=section]');
            select.empty();
            select.append('<option value="0" >Please Select Product</option>');
            $.each(data,function(key, value) {
                select.append('<option value=' + key.id + '>' + value.title + '</option>');
            });
            console.log("success");
        })
    });
});

Теперь проверьте:

1. Регистрируется ли listening for change event при загрузке страницы с правильным элементом в качестве параметра?
2. Регистрируется ли change event fired при изменении выбранного значения с правильным значением?
3. ajax response зарегистрировано с правильными данными (id, title)?