如何将数据库中的值显示到 Laravel 和 Ajax 中的选项值

Posted 2023-05-08

【中文标题】如何将数据库中的值显示到 Laravel 和 Ajax 中的选项值

【英文标题】：How to display the values form database ato the options values in Laravel and Ajax

【发布时间】：2019-08-26 19:51:49

【问题描述】：

我总共有 4 个选择框（例如：1）汽车制造商，2）汽车型号，3）制造年份，4）车身类型）。我能够将值填充到第三个选择框，即年份，但无法获得最后一个选择框的值。这些数据是从名为 carlist 的数据库表中获取的。

例如：选择汽车制造商作为奥迪 选择车型为 A4 选择制造年份 2009

但现在在第 4 个选择选项中，我将所有车身类型设为： 四驱车 范 轿车 车皮 双门轿车

我要获取的结果只有轿车。

我还能够从 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>

不太清楚如何解决这个问题并显示为选项。

【参考方案1】：

您无法在选择框中获取值，因为 jquery onchange 侦听器是在任何值附加到元素之前设置的，并且它没有检测到选项值已更新。

要按预期进行 jquery onchange 工作，您可以删除事件处理程序并在填充选择框后再次添加它，但我不推荐。

更好的方法是使用event.target 获取数据。

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

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