我正在尝试使用数据库中的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}} {{$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);
}