Question

我有一个动态填充数据库的选择框。第二个字段填充取决于用户在第一个框中选择的内容。我用ajax实现了这个目标。

当我选择第一个选项时，第二个选项显示＆＃39; undefined＆＃39;项目而不是数据库中的实际数据。

这是我的表格：

  <form class="form-inline" id="search-bar">

        <select class="form-control productcategory" id="product_cat_id">

           <option value="0" disabled="true" selected="true">Town</option>
           @foreach($estates as $estate)
             <option value="{{$estate->id}}">{{$estate->product_cat_name}
             </option>

           @endforeach
        </select>

        <select class="form-control productname">

           <option value="0" disabled="true" selected="true">Product Name</option>
        </select>

        <select class="form-control">
            <option value="0" disabled="true" selected="true">Size</option>
            <option value="Bedsitter">Bedsitter</option>
            <option value="One Bedroom">One Bedroom</option>
            <option value="Two Bedroom">Two Bedroom</option>
            <option value="Three Bedroom">Three Bedroom</option>
         </select>

        <button type="submit" class="btn btn-default">Search</button>
</form>

这是我的控制者：

   public function getIndex(){
          $houses = House::orderBy('id', 'desc')->limit(9)->get();
          //$towns = DB::table('houses')->pluck('Location', 'Location');
          //$estates = DB::table('houses')->pluck('Estate', 'Estate');
          $estates=ProductCat::all();

          $data = [
            'house' => $houses,
            //'towns' => $towns,
            'estates' => $estates
          ];
          return View('pages.home', $data);
      }

      public function findEstateName(Request $request){
          $data=House::select('Estate','id')->where('prod_cat_id',$request->id)->take(100)->get();
          return response()->json($data);//then send this data to ajax success
      }

这是我的ajax代码：

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('change', '.productcategory', function(){
           //console.log("Shit is working");

           var new_id=$(this).val();
           //console.log(cat_id);
           var div=$(this).parent();

           var op=" ";

            $.ajax({
               type:'get',
               url:'{!!URL::to('findEstateName')!!}',
               data:{'id':new_id},
               success:function(data){
                    //console.log('success');
                    //console.log(data);
                    //console.log(data.length);
                     op+='<option value="0" selected disabled>chose product</option>';
                     for(var i=0;i<data.length;i++){
                     op+='<option value="'+data[i].id+'">'+data[i].productname+'</option>';
                     }
                    div.find('.productname').html(" ");
                    div.find('.productname').append(op);

                },
               error:function(){

               }
            });
        });
        $(document).on('change','.productname',function (){
          var prod_id=$(this).val();

          var a=$(this).parent();
          console.log(prod_id);
          var op="";
        });
    });
</script>

我无法弄清楚为什么物品不会填充在我的第二个盒子上但只返回＆＃39; undefined＆＃39;。我能错过什么？

Answer 1

您在代码中使用的属性名称似乎是Estate而不是productname。尝试将data[i].productname更改为data[i].Estate。

所以这一行：

op+='<option value="'+data[i].id+'">'+data[i].productname+'</option>';

应该是：

op+='<option value="'+data[i].id+'">'+data[i].Estate+'</option>';

Ajax返回＆＃39; undefined＆＃39;值

1 个答案: