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

Posted 2023-05-08

技术标签:

【中文标题】根据第一次选择中选择的选项填充第二次选择【英文标题】：Populate 2nd select deoending of option choosen in 1st select 【发布时间】：2021-09-29 21:18:41 【问题描述】：

我正在尝试使用 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";
    

?>

【问题讨论】：

谢谢你的回答，肯定会看一下，并将更改我的代码以使用准备好的语句。 Form 1 和 Form 2 看起来很相似；做一个通用函数。 【参考方案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 所提到的，您应该真正使用参数化查询。我知道这似乎是一些额外的工作，但相信我，这值得你花时间。

【讨论】：

非常感谢！你帮了我很多，你的代码正在工作。我有一个问题，当我选择一个只有一个城市的国家时，我无法显示该城市的信息不用担心，很乐意为您提供帮助。很难说这种方式。请更新您的最终代码，我会看看。【参考方案2】：

（评论太长了。）

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

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

那必须是两次查找。

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

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

【讨论】：

以上是关于根据第一次选择中选择的选项填充第二次选择的主要内容，如果未能解决你的问题，请参考以下文章

选择器视图选项填充标签