Laravel ajax 在选择选项之前发送 id

Question

我尝试通过 4 个下拉菜单创建一个搜索功能，它们加载数据的前一个下拉所选项目的基础。

逻辑

field = 下拉选项

字段1选择A

字段2选项BC（选择B）

字段3选项DE（选择E）

字段 4 选项 F G（选择 F）=> 结果。

问题

1. 当我到达字段 2 时，它会发送 2 id 而不是一个（这是选定的项目 id），它将计为字段 3 id，因此我失去了选择字段 3 的能力。
2. 我无法获得字段 4 的结果。

截图

database logic

front-end logic & issue

代码

field one data

$findercategories = FinderYmmValue::where('parent_id', null)->get();

field 2 data, base on field one selected item

public function getSubCategories($id){
        $finderdropdownvalues = FinderYmmValue::where('parent_id', $id)->get();
        return response()->json($finderdropdownvalues);
  }

field 3 data, base on field two selected item

public function getspecifications($id){
    $fdhgkhehg = FinderYmmValue::where('parent_id', $id)->get();
    return response()->json($fdhgkhehg);
  }

field 4 data, base on field three selected item

public function getbrands($id){
    // $fdhgkhehg = FinderMap::where('', $id)->get();
    // return response()->json($fdhgkhehg);
    $skus = DB::table('finder_maps')
                ->where('ymm_value_id', $id)
                ->join('finder_ymm_values', 'finder_ymm_values.id', '=', 'finder_maps.ymm_value_id')
                ->groupBy('ymm_value_id')
                ->get();
    return response()->json($skus);
  }

JavaScript 代码

<!-- get field 2 items -->
<script type="text/javascript">
  $(document).ready(function() {
    $('select[name="category_id"]').on('change', function() {
      var categoryID = $(this).val();
      if(categoryID) {
      $.ajax({
        url: '{{ url('getSubCategories') }}/'+encodeURI(categoryID),
        type: "GET",
        dataType: "json",
        success:function(data) {
        $('select[name="subcategory_id"]').empty().append("<option value='' selected>Select</option>");
        $.each(data, function(key, value) {
            $('select[name="subcategory_id"]').append('<option value="'+ value['id'] +'">'+ value['title'] +'</option>');
            });
        }
      });
      }else{
        $('select[name="subcategory_id"]').empty().append("<option value='' selected>Select</option>");
      }
    });
  });
</script>
<!-- get field 3 items-->
<script type="text/javascript">
  $(document).ready(function() {
    $('select[name="subcategory_id"]').on('change', function() {
      var subcategoryID = $(this).val();
      if(subcategoryID) {
      $.ajax({
        url: '{{ url('getspecifications') }}/'+encodeURI(subcategoryID),
        type: "GET",
        dataType: "json",
        success:function(data) {
            $('select[name="specification_id"]').empty().append("<option value='' selected>Select</option>");
            $.each(data, function(key, value) {
                  $('select[name="specification_id"]').append(
                        "<option class='form-control' value='"+ value['id'] +"'>"+ value['title'] +"</option>");
            });
        }
      });
      }else{
        $('select[name="specification_id"]').empty().append("<option value='' selected>Select</option>");
      }
    });
  });
</script>
<!-- get field 4 items-->
<script type="text/javascript">
  $(document).ready(function() {
    $('select[name="subcategory_id"]').on('change', function() {
      var subcategoryID = $(this).val();
      if(subcategoryID) {
      $.ajax({
        url: '{{ url('getbrands') }}/'+encodeURI(subcategoryID),
        type: "GET",
        dataType: "json",
        success:function(data) {
        $('select[name="brand_id"]').empty().append("<option value='' selected>Select</option>");
        $.each(data, function(key, value) {
            $('select[name="brand_id"]').append('<option class="form-control" value="'+ value['id'] +'">'+ value['sku'] +'</option>');
            });
        }
      });
      }else{
        $('select[name="brand_id"]').empty().append("<option value='' selected>Select</option>");
      }
    });
  });
</script>

问题

1. 为什么当我选择第二个字段项时会发送 2 id？
2. 为什么我在选择字段 3 时无法发送它？

有什么想法吗？

Answer 1

您将 2 个事件处理程序绑定到 select[name="subcategory_id"] 而没有绑定到 select[name="specification_id"] 这就是为什么当您选择第二个选项时会收到 2 个请求，而当您选择第三个选项时却没有。