Tab 3 cấp nhóm nghanhnghe

 
// ===== LẤY TOÀN BỘ MODULE =====

    $sql = "SELECT mid, title, parentid FROM ".$catalog."_module ORDER BY id";

    $rs  = $db->sql_query($sql);

    $modules = array();

    while ($row = $db->sql_fetchrow($rs)) {

        $modules[] = $row;

    }

    echo '<div class="grid-notfor-supp">';

        // ===== CẤP 1: GIAN HÀNG =====

        echo '<select id="gian_hang" name="gian_hang" required>

                <option value="">-- Gian hàng --</option>';

                foreach($modules as $row){

                    if($row["parentid"] == 0){

                        echo '<option value="'.$row["mid"].'">'.$row["title"].'</option>';

                    }

                }

        echo '</select>';

        // ===== CẤP 2: TAB CHA =====

        echo '<select id="tab_cha" name="tab_cha" disabled required>

            <option value="">-- Tab cha --</option>';

            foreach($modules as $row){

                if($row["parentid"] != 0){

                    echo '<option value="'.$row["mid"].'" data-parent="'.$row["parentid"].'">'.$row["title"].'</option>';

                }

            }

        echo'</select>';

        // ===== CẤP 3: TAB CON =====

        echo'<select id="tab_con" name="tab_con" disabled required>

            <option value="">-- Tab con --</option>';

            foreach($modules as $row){

                if($row["parentid"] != 0){

                    echo '<option value="'.$row["mid"].'" data-parent="'.$row["parentid"].'">'.$row["title"].'</option>';

                }

            }

        echo'</select>';

    echo '</div>';

    echo '<div class="error" id="errorMsg">

        ⚠ Vui lòng chọn đầy đủ Gian hàng, Tab cha và Tab con

    </div>';

    ?>

    <style>

    form#gycForm-total{

        max-width: 720px;

        margin: 30px auto;

    }

    .grid-notfor-supp{

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 12px;

    }

    .grid-notfor-supp select{

        padding: 8px;

        width: 100%;

    }

    .error{

        color: #d00;

        margin-top: 10px;

        display: none;

    }

    </style>

    <script>

    (() => {

        const form     = document.getElementById('gycForm-total');

        const gianHang = document.getElementById('gian_hang');

        const tabCha   = document.getElementById('tab_cha');

        const tabCon   = document.getElementById('tab_con');

        const errorMsg = document.getElementById('errorMsg');

        const chaOpts = [...tabCha.querySelectorAll('option')];

        const conOpts = [...tabCon.querySelectorAll('option')];

        // ===== GIAN HÀNG → TAB CHA =====

        gianHang.addEventListener('change', () => {

            tabCha.innerHTML = '<option value="">-- Tab cha --</option>';

            tabCon.innerHTML = '<option value="">-- Tab con --</option>';

            tabCon.disabled = true;

            if (!gianHang.value) {

                tabCha.disabled = true;

                return;

            }

            chaOpts.forEach(opt => {

                if (opt.dataset.parent == gianHang.value) {

                    tabCha.appendChild(opt.cloneNode(true));

                }

            });

            tabCha.disabled = false;

        });

        // ===== TAB CHA → TAB CON =====

        tabCha.addEventListener('change', () => {

            tabCon.innerHTML = '<option value="">-- Tab con --</option>';

            if (!tabCha.value) {

                tabCon.disabled = true;

                return;

            }

            conOpts.forEach(opt => {

                if (opt.dataset.parent == tabCha.value) {

                    tabCon.appendChild(opt.cloneNode(true));

                }

            });

            tabCon.disabled = false;

        });

        // ===== VALIDATE =====

        form.addEventListener('submit', e => {

            if (!gianHang.value || !tabCha.value || !tabCon.value) {

                e.preventDefault();

                errorMsg.style.display = 'block';

            } else {

                errorMsg.style.display = 'none';

            }

        });

    })();

    </script>

    <?php