Question

我正在尝试使用数据库中的ajax动态下拉列表。所以这是我想要的场景：

-如果我在下拉菜单中选择一个时间表，则希望该时间表的所有相关总线都在该较低的总线下拉列表中填充。

到目前为止，我一切正常！我的意思是我测试了数据可以传递给控制器，控制器也返回了数据的json。但是，当我尝试在成功的函数中将选择的Bus选项填充到html时，总线下拉菜单中没有出现问题。

我不知道我错过了什么，但确定有问题

查看

<div class="form-group {{ $errors->first('schedule', 'has-error') }}">
                  <label for="schedule" class="col-sm-2 control-label">Schedule *
                  </label>
                  <div class="col-sm-10">
                    <select class="form-control schedule" title="Select Pas..." name="schedule">                                         
                      <option value="">Select Schedule
                      </option>
                      @foreach ($schedules as $schedule)
                      <option value="{{ $schedule->id}}" 
                        @if (old('schedule')=== "{{$schedule->id}}") selected="selected"@endif
                        >{{ $schedule->schedule_number}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  {{$schedule->station->name}}
                      </option>
                      @endforeach
                    </select>
                    {!! $errors->first('schedule', '
                    <span class="help-block">:message
                    </span>') !!}
                  </div>   
                </div>

                <div class="form-group {{ $errors->first('bus_number', 'has-error') }}">
                  <label for="bus_number" class="col-sm-2 control-label">Bus *
                  </label>
                  <div class="col-sm-10">
                    <select class="form-control " id="busnumber"  name="bus_number">                                         
                      <option value="0" disabled="true" selected = "true"> Select Bus

                      </option>
                    </select>
                    {!! $errors->first('bus_number', '
                    <span class="help-block">:message
                    </span>') !!}
                  </div>   
                </div>

这是脚本

<script type="text/javascript">
$(document).ready(function(){

    $(document).on('change','.schedule',function(){
        // console.log("hmm its change");

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

        var op=" ";
  // console.log(div);


        $.ajax({
            type:'get',
            url:"{{ route('admin.reserve.getBusStation') }}",
            data:{'id':id},
            success:function(data){
                //console.log('success');

                //console.log(data);

                op+='<option value="0" selected disabled>chose Bus Number</option>';
                for(var i=0;i<data.length;i++){
                  op+='<option value="'+data[i].id+'">'+data[i].bus_number+'</option>';
              }

              div.find('#busnumber').html(" ");
      // console.log(div);
              div.find('#busnumber').append(op);
      // console.log(div);



            },
            error:function(){

            }
        });
    });
});
</script>

控制器

public function getBusStation(Request $request)
{ 
    $id = $request->id;
    $queue = Schedule::find($id)->queue;

    $data = $queue;  
    return Response()->json($data);
}

Laravel：使用jax动态下拉列表不返回数据

0 个答案: