Laravel AJAX отправить идентификатор до выбора опции

Question

Я пытаюсь сделать функцию поиска по 4 выпадающим спискам, которые загружают базу данных предыдущего выпадающего выбранного элемента.

Логика

поле = параметр раскрывающегося списка

Выбор поля 1 A

Параметры поля 2 B C (Выбрать B)

Параметры поля 3 D E (Выбрать E)

Поле 4 варианта F G (Выбрать F) => Результаты.

Проблемы

1. КогдаЯ достигаю поля 2, оно отправляет 2 идентификатора вместо одного (который является идентификатором выбранного элемента), и оно считается как поле 3, так что я теряю возможность выбора поля 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 идентификатора, когда я выбираю mу второго элемента поля?
2. Почему я не могу отправить свой идентификатор поля 3, когда я его выбираю?

Есть идеи?

Answer 1

Вы связали 2 обработчика событий с select[name="subcategory_id"], а ни один с select[name="specification_id"], поэтому вы получаете 2 запроса при выборе второго параметра и ни одного при выборе третьего.