Как отобразить базу данных значений в значения параметров в Laravel и Ajax

Question

У меня есть всего 4 поля выбора (например: 1) Марка автомобиля, 2) Модель автомобиля, 3) Год выпуска, 4) Тип кузова). Я могу заполнить значения в третьем окне выбора, т.е. в год, но не могу получить значения для последнего. Эти данные извлекаются из таблицы базы данных, которая называется carlist.

Например: выберите марку автомобиля в качестве Audi Выберите модель автомобиля как A4 Выберите Год выпуска 2009

Но теперь в 4-х выбранных опциях я получаю все типы кузова Car как: 4WD фургон Седан вагон Купе

В результате я хочу получить только седан.

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

Мой код:

index.blade.php

<select class="form-input select button-shadow dynamic"   name="Make" id="Make"  data-dependent='Model'>

              @foreach($carLists as $carMake)
                <option value="{{$carMake->Make}}">{{$carMake->Make}} </option>
              @endforeach
              </select>
         </div>

          <div class="form-wrap">
            <select class="form-input select button-shadow dynamic"  name="Model" id="Model"  data-dependent='Year'>
               <option value="">Select Make</option>
           </select>
         </div>

          <div class="form-wrap">
          <select class="form-input select button-shadow dynamic"  name="Year" id="Year"  data-dependent='Body'>
              <option value="">Select Year</option>
              </select>
            </div>

          <div class="form-wrap"> 
           <select class="form-input select button-shadow dynamic" name="Body" id="Body">
              <option value="">Select Body</option>
            </select>
          </div>

PagesController.php

  function fetch(Request $request)
          {
           $select = $request->get('select');
           $value = $request->get('value');
           $dependent = $request->get('dependent');
           $data = DB::table('carlists')
             ->where($select, $value)
             ->groupBy($dependent)
             ->get();

           $output = '<option value="">Select '.ucfirst($dependent).'</option>';
           foreach($data as $row)
           {
            $output .= '<option value="'.$row->$dependent.'">'.$row->$dependent.'</option>';
           }
           echo $output;
          }

          function fetchbody(Request $request)
          {
           $make = $request->get('make');
           $model = $request->get('model');
           $year = $request->get('year');
           $dependent = $request->get('dependent');

           $data = DB::select('Select Make, Model, Year, Body FROM carlists WHERE Make =  "'.$make .'" AND Model = "'.$model .'" AND Year = "'.$year .'" GROUP by Body');

           $output = '<option value="">Select '.ucfirst($dependent).'</option>';
           foreach($data as $row)
           {
            $output .= '<option value="'.$row->$dependent.'">'.$row->$dependent.'</option>';
           }
           echo $output;
          }

Route.php

Route::post('inc/sidebar/fetch', 'PagesController@fetch')->name('pagescontroller.fetch');
Route::post('car/make/body/fetch', 'PagesController@fetchbody')->name('bodycontroller.fetch');

JavaScript:

<script>
         $('#Year').on('change', function(e){

           var make = $('#Make').val();
           var model = $('#Model').val();
           var year = e.target.value;

           var dependent = $(this).data('dependent');

           var _token = $('input[name="_token"]').val();

           $.ajax({
              url:"{{ route('bodycontroller.fetch') }}",
              method:"POST",
              data:{make:make, model:model,  year:year, _token:_token, dependent:dependent},
              success:function(result)
              {

               $('#'+dependent).html(result);

               alert('Sucess: ' + make + ' ' + model + ' ' + year + result);
              }

           })


             });
    </script>


    <script>
          $(document).ready(function(){

           $('.dynamic').change(function(){
            if($(this).val() != '')
            {

             var select = $(this).attr("id");

             var value = $(this).val();

             var dependent = $(this).data('dependent');

             var _token = $('input[name="_token"]').val();
             $.ajax({
                url:"{{ route('pagescontroller.fetch') }}",
                method:"POST",
                data:{select:select, value:value, _token:_token, dependent:dependent},
                success:function(result)
                {

                 $('#'+dependent).html(result);
                }

             })
           }
           });


</script>

Не совсем уверен, как это исправить и отобразить как опции.

Answer 1

Невозможно получить значение в поле выбора, поскольку слушатель jquery onchange был настроен до того, как какое-либо значение было добавлено в элемент, и он не обнаружил, что значения параметров были обновлены.

Чтобы сделать jquery onchange должным образом, вы можете удалить обработчик событий и добавить его снова после заполнения поля выбора, но я не рекомендую.

Лучше использовать event.targetчтобы получить данные.

$('.dynamic').change(function(event){
    const value = event.target.value
    ...
})

https://codepen.io/lc-brito/pen/dLMVaj