根据第一次选择中选择的选项填充第二次选择

Question

我正在尝试使用 PHP+MySQL+Ajax 在选择中动态加载选项，但我不知道该怎么做

目前我在 2 个表单中有 2 个选择，我需要发送 2 次表单，因此页面将加载 2 次。 我想使用 ajax 改进我的代码，这样我的页面会加载得更快并且更容易使用。

• 选择 1 有一个国家/地区列表
• 选择 2 包含选择 1 中所选国家/地区的城市列表

选择城市后，屏幕上会显示该城市的具体信息。

表格 1

<?php include_once "conn.php"; ?>
<!-- Form 1 -->
<form action="" method="post">
    <select required id="Countries" name="Countries">
        <?php
        $sql = "SELECT distinct Country FROM cities order by 1 asc";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                echo '<option value="' . $row["Country"] . '">' . $row["Country"] . '</option>';
            }
        } else {
            echo "0 results";
        }
        ?>
    </select>
    <input type="submit" id="LoadCities" name="LoadCities" value="Load Cities" />
</form>

表格2

<!-- Store select 1 value in variable -->
<?php
if (isset($_POST['Countries'])) {
    $Countries = $_POST['Countries'];
}
?>

<!-- Form 1 -->
<form action="" method="post">
    <select required id="Cities" name="Cities">
        <?php
        $sql = 'SELECT  * FROM cities  where country="' . $Countries . '"';
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                echo '<option value="' . $row["City"] . '">' . $row["City"] . '</option>';
            }
        } else {
            echo "0 results";
        }
        ?>
    </select>
    <input type="submit" id="ShowInfo" name="ShowInfo" value="ShowInfo" />
</form>

在屏幕上显示城市信息：

<!-- Store select 2 value in variable and print selected options in screen-->
<?php
if (isset($_POST['Cities'])) {
    $City = $_POST['Cities'];
    $sql = 'SELECT * FROM cities where City="' . $City . '"';
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            echo '<p>Country: ' . $row["Country"] . '</p>';
            echo '<p>City: ' . $row["City"] . '</p>';
        }
    } else {
        echo "0 results";
    }
}
?>

---

Answer 1

让 Ajax 无需您刷新或提交表单即可工作。您需要为您的 ajax 调用创建单独的端点。您应该有 3 个文件：

• index.php - 在这里一起显示国家表格、城市表格和城市信息。国家数据将默认加载，其他数据将链接到它们各自的 Ajax 调用。
• fetchCities.php - 使用此端点根据所选国家/地区值获取城市的下拉值。
• cityInfo.php - 使用此端点根据所选城市值获取城市信息。

注意：如果您在 Ajax 调用中包含第二个参数，您可以将 fetchCities.php 和 cityInfo.php 合并到一个文件中，例如：action: "fetchCity"

您可以这样做：

index.php

<?php include_once "conn.php"; ?>
<form action="" method="post">
    <select required id="Countries" name="Countries">
        <?php
        $sql = "SELECT distinct Country FROM cities order by 1 asc";
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                echo '<option value="' . $row["Country"] . '">' . $row["Country"] . '</option>';
            }
        } else {
            echo "0 results";
        }
        ?>
    </select>
    <input type="submit" id="LoadCities" name="LoadCities" value="Load Cities" />
</form>

//empty city dropdown. You may remove the form element from it if not required.
<form action="" method="post">
    <select required id="Cities" name="Cities">
        <option disabled selected>Select a country first</option>
    </select>
</form>

//empty city info
<div id="cityInfo"></div>

<script>
    //whenever someone selects a country, hit the Ajax to fetch cities.
    $(document).on('change', '#Countries', function() {
        const selectedCountry = $(this).val();
        //run your cities Ajax here and pass selectedCountry value
        $.ajax({
                method: "POST",
                url: "fetchCities.php",
                data: {
                    Countries: selectedCountry
                }
            })
            .done(function(response) {
                //replace City dropdown with values returned from fetchCities.php file.
                $('#Cities').html(response);
            });
    });

    //whenever someone selects a city, hit the Ajax to fetch city information.
    $(document).on('change', '#Cities', function() {
        const selectedCity = $(this).val();
        //run your cities Ajax here and pass selectedCity value
        $.ajax({
                method: "POST",
                url: "cityInfo.php",
                data: {
                    Cities: selectedCity
                }
            })
            .done(function(response) {
                $('#cityInfo').html(response);
            });
    });
</script>

fetchCities.php

<?php include_once "conn.php";

if (isset($_POST['Countries'])) {
    $Countries = $_POST['Countries'];
    $sql = 'SELECT  * FROM cities  where country="' . $Countries . '"';
    $result = $conn->query($sql);
    
    $returnHtml = '';
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $returnHtml .= '<option value="' . $row["City"] . '">' . $row["City"] . '</option>';
        }
    } else {
        $returnHtml = '<option disabled selected>0 results</option>';
    }
    echo $returnHtml;
}else{
    echo '<option disabled selected>0 results</option>';
}
?>

cityInfo.php

<?php
include_once "conn.php";

if (isset($_POST['Cities'])) {
    $City = $_POST['Cities'];
    $sql = 'SELECT * FROM cities where City="' . $City . '"';
    $result = $conn->query($sql);

    $returnHtml = '';
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $returnHtml .= '<p>Country: ' . $row["Country"] . '</p>';
            $returnHtml .= '<p>City: ' . $row["City"] . '</p>';
        }
        echo $returnHtml;
    } else {
        echo "0 results";
    }
}else{
    echo "0 results";
}
?>

此外，正如 Dharman 所提到的，您应该真正使用参数化查询。我知道这似乎是一些额外的工作，但相信我，这值得你花时间。

Answer 2

（评论太长了。）

让我直说。在单个页面上：

1. 页面初始化为所有国家的列表。 （在构建页面时，或通过 AJAX。）
2. 用户从所有国家的列表中选择一个国家。
3. 第二个数据库查找查找该国家/地区的城市。
4. 然后对这些城市进行处理。

那必须是两次查找。

既然您提到了 AJAX，您想在不重新加载页面的情况下完成所有这些操作吗？请注意<form> 想要重新加载页面。是的，您可以变态地执行 AJAX，但如果您不提交和重新加载页面，为什么还要使用 <form>？

全球城市的完整列表超过 300 万个。你在用那么大的桌子吗？还是某个子集，例如“拥有汉堡王的城市”？