Laravel 5.4选择输入填充下一个选择输入及相关数据

Question

我正在制作一个Laravel 5.4项目，用户应该在注册之前选择一所学校及其班级。我希望他们首先在一个元素中选择他们的学校，其中的选项包含了课程学校。但是，如果他们在第一个元素中选择了一所学校，我将如何获得填充相关课程的下一个元素选项？

Answer 1

发送一个AJAX请求，该请求在学校选择的更改事件中发送，然后使用结果填充类。

Answer 2

您可以为每所学校加载所有学校和可能的课程并将其存储在javascript对象中，然后在选择学校后，您可以使用javascript对象中的相应数据刷新课程选择框。

如果此数据组合太大而无法加载，您可以在选择学校时执行ajax请求，并在服务器端检索所选学校的课程。

Answer 3

我还没有测试过这段代码，但希望有所帮助

查看

<select name="school">
      @foreach($allSchools as $school)
         <option value="{{$school->id}}">{{$school->name}}</option>
      @endforeach
</select>

<select name="my_class">
      @foreach($allClasses as $class)
         <option value="{{$class->id}}">{{$class->name}}</option>
      @endforeach
</select>

<script>
  $("select[name='school']").change(function () {
    var school_id = $("select[name='school']").val();
    if (school_id !== '' && school_id !== null) {
      $("select[name='my_class']").prop('disabled',
      false).find('option[value]').remove();
      $.ajax({
        type: 'GET',
        url: {{ url('class/getClass') }}, // do not forget to register your route
        data: {id: school_id },
        }).done(function (data) {
          $.each(data, function (key, value) {
            $("select[name='my_class']")
                .append($("<option></option>")
                .attr("value", key)
                .text(value));
        });
      }).fail(function(jqXHR, textStatus){
          console.log(jqXHR);
      });
   } else {
      $("select[name='my_class']").prop('disabled', 
      true).find("option[value]").remove();
   }
});
</script>

<强> ClassController

public function getClass(Request $request){
  $classes= Class::where('school_id', $request->id)->pluck('name', 'id');
  return $classes;
}