Question

我使用php和jquery ajax为国家/地区，州和城市设置了以下动态选择选项。

但这种设置的问题是，如果两个或多个州具有相同的名称，则无论国家/地区如何，所有相关城市都将成为输出。

如下图所示（请想象加拿大有一个州名为加利福尼亚州，为了这个例子）：

如何解决此问题，即如何获得Cities of State California of Country USA的输出？

这些是我想我需要改进的部分。我一直在尝试一些方法，但它们都没有工作。所以我真的很感激任何帮助。

ajax：

$('.action').change(function() {
   if ($(this).val() != '') {
      var action = $(this).attr("id");
      var query = $(this).val();
      var result = '';
      if (action == "country") {
         result = 'state';
      } else {
         result = 'city';
      }
      $.ajax({
         url: "fetch.php",
         method: "POST",
         data: {
            action: action,
            query: query
         },
         success: function(data) {
            $('#' + result).html(data);
         }
      })
   }
});

我尝试过的php查询：

$query = "SELECT city FROM country_state_city WHERE state = '" . $_POST["query"] . "'";
$result = mysqli_query($connect, $query);
$output.= '<option value="">Select City</option>';

while ($row = mysqli_fetch_array($result))
    {
    $output.= '<option value="' . $row["city"] . '">' . $row["city"] . '</option>';
    }

这是完整代码，以防您需要查看： index.php

<?php
$country = '';
$query = "SELECT country FROM country_state_city GROUP BY country ORDER BY country ASC";
$result = mysqli_query($connect, $query);
while ($row = mysqli_fetch_array($result)) {
    $country .= '<option value="' . $row["country"] . '">' . $row["country"] . '</option>';
}
?>

<select name="country" id="country" class="form-control action">
    <option value="">Select Country</option>
    <?php echo $country; ?>
</select>
<select name="state" id="state" class="form-control action">
    <option value="">Select State</option>
</select>
<select name="city" id="city" class="form-control">
    <option value="">Select City</option>
</select>


<script>
    $(document).ready(function () {
        $('.action').change(function () {
            if ($(this).val() != '')
            {
                var action = $(this).attr("id");
                var query = $(this).val();
                var result = '';
                if (action == "country")
                {
                    result = 'state';
                } else
                {
                    result = 'city';
                }
                $.ajax({
                    url: "fetch.php",
                    method: "POST",
                    data: {action: action, query: query},
                    success: function (data) {
                        $('#' + result).html(data);
                    }
                })
            }
        });
    });
</script>

fetch.php

<?php

if (isset($_POST["action"])) {
    $output = '';
    if ($_POST["action"] == "country") {
        $query = "SELECT state FROM country_state_city WHERE country = '" . $_POST["query"] . "' GROUP BY state";
        $result = mysqli_query($connect, $query);
        $output .= '<option value="">Select State</option>';
        while ($row = mysqli_fetch_array($result)) {
            $output .= '<option value="' . $row["state"] . '">' . $row["state"] . '</option>';
        }
    }

    if ($_POST["action"] == "state") {
        $query = "SELECT city FROM country_state_city WHERE state = '" . $_POST["query"] . "'";
        $result = mysqli_query($connect, $query);
        $output .= '<option value="">Select City</option>';
        while ($row = mysqli_fetch_array($result)) {
            $output .= '<option value="' . $row["city"] . '">' . $row["city"] . '</option>';
        }
    }
    echo $output;
}
?>

Answer 1

您需要为所有填充的选择填充下一个选择，然后构建正确的数据查询。

@Example for populate CITY您需要知道选择了COUNTRY和STATE。

<强> PHP

if(isset($_POST['country']) && $_POST['country'] != ''
    && (!isset($_POST['state']) || $_POST['state'] == '') {
        // return STATES for selected COUNTRY
        $sql = "SELECT country, state FROM tbl WHERE country = {postCountry}";
}
else if(isset($_POST['country']) && $_POST['country'] != ''
    && isset($_POST['state']) && $_POST['state'] == '') {
        // return CITIES for selected COUNTRY and STATE
        $sql = "SELECT country, state, city FROM tbl WHERE country = {postCountry} AND state = {postState}";
}

此查询

$query = "SELECT country FROM country_state_city GROUP BY country ORDER BY country ASC";

可以更改为DISTINCT

$query = "SELECT DISTINCT country FROM country_state_city ORDER BY country ASC";

<强> JQUERY 将数据打包成表单是一种很好的方法，因为它可以轻松地处理表单元素，如选择。

$('.action').change(function() {
    var formValues = $(this).closest('form').serialize();

    $.ajax({
      url: "fetch.php",
      method: "POST",
      data: formValues,
      success: function (data) {
          $('#' + result).html(data);
      }
  });
});

您可以在演示中检查更改中的DevTools控制台和网络中的XHR请求，这些值将在请求中发送给PHP。

DEMO JQUERY

希望这有帮助。快乐的编码

动态选择具体国家特定国家的特定城市＆＃39 ;?

1 个答案: