Невозможно динамически загрузить зависимый флажок на флажок множественного выбора в AJAX

Question

Я пытаюсь загрузить список стран и государств на основе выбранной страны (флажок), и он может загрузить выбранную страну и ее состояние в флажок,

, но проблема в том, что когда я выбираю две страны, он загружает только одну странусписок состояний не загружает первую страну, когда я выбираю вторую.

ПРОБЛЕМА

• , когда я выбираю Китай и Индию, генерируется только список состояний Индии.
• генерирует список последней выбранной страны.

PHP

require_once ("config.php");
$query = $conn->prepare("SELECT * FROM country");
$query->execute();
$countryResult = $query->fetchAll(PDO::FETCH_ASSOC);
foreach ($countryResult as $country) {
?>
  <div class="form-check">
    <input class="form-check-input country-list" type="checkbox" name="country[]"  onChange="getState();" value="<?php echo $country["id"]; ?>">
    <label class="form-check-label" for="<?php echo $country["id"]; ?>">
           <?php echo $country["country_name"]; ?>
    </label>
  </div>
<?php
    }
?>
<div class="row">
            <label>State:</label>
            <div id="state-list" class="demoInputBox">
            </div>
        </div>

SCRIPT

function getState() {
            var str = '';
            var val = document.getElementsByClassName('country-list');
            for (i = 0; i < val.length; i++) {
                if (val[i].checked) {
                    str += val[i].value + ',';
                }
            }
            var str = str.slice(0, str.length - 1);

            $.ajax({
                type: "GET",
                url: "get_state.php",
                data: 'country_id=' + str,
                success: function (data) {
                    $("#state-list").html(data);
                }
            });
        }

Get_state.php

require_once("config.php");
if (!empty($_GET['country_id'])) {
    $coun_id = $_GET["country_id"];
    $query = $conn->prepare("SELECT * FROM states WHERE countryID=:coun_id");
    $query->bindParam(':coun_id', $coun_id, PDO::PARAM_INT);
    $query->execute();
    $results = $query->fetchAll(PDO::FETCH_ASSOC);
    ?>
    <?php
    foreach ($results as $state) {
        ?>
        <div class="form-check">
            <input class="form-check-input country-list" type="checkbox" name="state[]" onChange="getState();" value="<?php echo $state["id"]; ?>">
            <label class="form-check-label" for="<?php echo $state["name"]; ?>">
                <?php echo $state["name"]; ?>
            </label>
        </div>
        <?php
    }
}

Answer 1

Вы проверили свой Ajax, если он отправляет правильные данные, попробуйте это, может быть, это поможет вам

require_once("config.php");

if (!empty($_GET['country_id'])) {
    $coun_id = $_GET["country_id"];
    $query = $conn->prepare("SELECT * FROM states WHERE countryID IN ($coun_id)");
    $query->bindParam(':coun_id', $coun_id, PDO::PARAM_INT);
    $query->execute();
    $results = $query->fetchAll(PDO::FETCH_ASSOC);
    ?>
    <?php
    foreach ($results as $state) {
        ?>
        <div class="form-check">
            <input class="form-check-input country-list" type="checkbox" name="state[]" onChange="getState();" value="<?php echo $state["id"]; ?>">
            <label class="form-check-label" for="<?php echo $state["name"]; ?>">
                <?php echo $state["name"]; ?>
            </label>
        </div>
        <?php
    }
}