Блог

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

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

Но теперь в 4-м выборе параметров я получаю все типы кузова автомобиля как: 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>
  

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

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

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

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

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

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