Зависимый выпадающий не работает правильно

Question

Это мой первый раз на этом сайте, поэтому я буду охотиться.

Я работал над веб-системой управления основными средствами, используя PHP, AJAX, jquery и MySQL в качестве базы данных (структура проекта была сделана в соответствии с руководством на этом сайте: https://www.itechempires.com/2016/07/pdo-crud-operations-using-php-bootstrap/), где такие элементы регистрируются вместе с категориями, к которым относится каждый актив, транзакциями, совершенными пользователями внутри компании, и отчетами, генерируемыми каждой транзакцией.

В настоящее время я застрял с выпадающими списками, поскольку я пытался сделать все возможное, чтобы они работали, но без результатов, которые я искал, а именно: в модальном режиме есть форма, в которую будет добавлен актив со связанной с ним информацией, две из этих подробностей - это категории и подкатегории, которые обрабатываются зависимыми раскрывающимися списками; раскрывающийся список для подкатегорий будет отображаться после выбора категории.

Будут рассмотрены фрагменты кода, которые будут сосредоточены на тех, которые связаны с раскрывающимися списками:

Таблица

группа (группа или категория)

• id_grp (идентификатор группы, автоинкрементный, невидимый пользователем)
• codigo_grp (код)
• nombre_grp (имя)

подгруппа (подгруппа или подкатегория)

• id_sgrp (идентификатор подгруппы, автоинкрементный, невидимый пользователем)
• codigo_sgrp (код)
• nombre_sgrp (имя)
• vidaUtil_sgrp (срок полезного использования)
• id_grp (идентификатор группы, внешний ключ)

libAF.php: Содержит все запросы для операций crud

    /* 
    * Get group's id and name
    *
    * @return $id_grp, $nombre_grp
    * */
    public function populateSelGrp()
    {
        $query = $this->db->prepare("SELECT id_grp, nombre_grp FROM grupo");
        $query->execute();
        $data = array();
        while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
            $data[] = $row;
        }
        return $data;
    }

    /* 
    * Get sub-group's id and name
    *
    * @return $id_grp, $nombre_grp
    * */
    public function populateSelSgrp($id_grp)
    {
        $query = $this->db->prepare("SELECT * FROM subgrupo WHERE id_grp = :id_grp");
        $query->bindParam("id_grp", $id_grp, PDO::PARAM_STR);
        $query->execute();
        $data = array();
        while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
            $data[] = $row;
        }
        return $data;
    }

populateSelGrp.php: загружает категории в выпадающий список родителей

<?php

require 'libAF.php';

$data = "";

$object = new CRUD();

$grupos = $object->populateSelGrp();

$data .= '<select id="select_grp" class="form-control" onchange="populateSelSgrp()">';
$data .= '<option value="0" disabled selected>Escoja grupo</option>';    
if (count($grupos) > 0) {
    foreach ($grupos as $grupo) {
        $data .= '<option id="selected_grp" value="' . $grupo['id_grp'] . '"> ' . $grupo['nombre_grp'] . '</option>';
    }
}
else
{
    $data .= '<option>No hay opciones disponibles</option>';
}

$data .= '</select>';

echo $data;

?>

populateSelSgrp.php: загружает подкатегории в раскрывающийся список дочерних элементов

<?php

require 'libAF.php';

if (isset($_POST['id_grp']) && isset($_POST['id_grp']) != "") {
    $id_grp = $_POST['id_grp'];
    $data = "";

    $object = new CRUD();

    $subgrupos = $object->populateSelSgrp($id_grp);

    $data .= '<label for="select_sgrp">Sub-grupo</label>';
    $data .= '<select id="select_sgrp" class="form-control">';
    $data .= '<option value="0" disabled selected>Escoja sub-grupo</option>';

    if (count($subgrupos) > 0) {
        foreach ($subgrupos as $subgrupo) {    
            $data .= '<option value="' . $subgrupo['id_sgrp'] . '"> ' . $subgrupo['nombre_sgrp'] . '</option>';
        }
    }
    else
    {
        $data .= '<option>No hay opciones disponibles</option>';        
    }

    $data .= '</select>';

    echo $data;
}

?>

scptAF.js: содержит сценарии, необходимые для работы входных данных

function populateSelGrp(){        
$.get("ajax/activoFijo/populateSelGrp.php", {
},
    function (data, status) {
//load options to dropdown list
        $(".option_grp").html(data);
    }
);
}

function populateSelSgrp(id_grp){
$.ajax({
    url: "ajax/activoFijo/populateSelSgrp.php",
    method: "POST",
    data:{id_grp: id_grp},
    success:function(data){
        $(".option_sgrp").html(data);
    }
})            
}

activos.php (assets): видимая страница, на которой пользователь добавляет, удаляет или обновляет актив.

 <div class="form-group">
     <label for="select_grp">Grupo</label>
     <div class="option_grp"></div>
 </div>         
 <div class="form-group">
      <div class="option_sgrp"></div>
 </div>

Answer 1

Я наконец-то нашел решение для этого беспорядка, это был небольшой код, который мне пришлось добавить в файл javaScript, чтобы отправить идентификатор во второй выпадающий список. Хотя я наконец исправил свою проблему, я хотел бы увидеть другие предложения о том, как решить эту проблему.

Вот мой фрагмент

scptAF.js

function populateSelGrp() {
$.get("ajax/activoFijo/populateSelGrp.php", {
},
    function (data, status) {
//load options to dropdown list
        $(".option_grp").html(data);
    }
);
}

function changeGrpId(){
var id_grp = document.getElementById("select_grp").value;
populateSelSgrp(id_grp);
}

function populateSelSgrp(id_grp) {
$.ajax({
    url: "ajax/activoFijo/populateSelSgrp.php",
    method: "POST",
    data:{id_grp: id_grp},
    success:function(data){
        $(".option_sgrp").html(data);
    }
})
}