Question

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

例如：选择Car Make作为Audi 选择汽车型号作为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>

不太确定如何解决此问题并显示为选项。

Answer 1

您无法在选择框中获得该值，因为jquery onchange侦听器是在将任何值添加到元素之前设置的，并且不会检测到选项值已更新。

要按预期执行jquery onchange工作，可以删除事件处理程序，然后在填充选择框后再次添加它，但我不建议这样做。

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

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

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

如何从Laravel和Ajax中的选项值显示数据库形式的值

1 个答案: