带搜索框的从属下拉列表答案

【问题标题】：Dependant Drop Down List With Search Box带搜索框的从属下拉列表
【发布时间】：2026-02-22 21:25:02
【问题描述】：

我有三张桌子：

国家 [CountryId, CountryName]
国家 [StateId, StateName, CountryId_FK]
城市 [CityId, CityName, CityInfo, StateId_FK]

在我的 html 表单中，我可以使用 PHP 和 Ajax 在两个相关下拉列表中列出国家和州。州下拉菜单取决于运行良好的国家/地区下拉菜单。

但是，我试图让输入文本框根据州的选择搜索城市，如果城市存在，它应该最好将 CityName 和 CityInfo 显示到表格中。

下面是我认为我卡在的 php 代码。

    if (isset($_POST['StateId'])){
        $query = "SELECT * FROM tblCities WHERE StateId=".$_POST['StateId'] ;
        // GET Search here???
        $result = $conn->query($query);
        if ($result->num_rows > 0){
        //DO SOMETHING HERE
        }

注意：我可以将结果回显到表格中，但我想在显示匹配之前先搜索一个城市。

ajaxdata.php

if (isset($_POST['CountryId'])){
    $query = "SELECT * FROM tblStates WHERE CountryId=".$_POST['CountryId'];
    $result = $conn->query($query);
    if ($result->num_rows > 0){
        echo '<option selected disabled value="">Select States</option>';
        while ($row = $result->fetch_assoc()){
            echo '<option value='.$row['StateId'].'>'.$row['StateName'].'</option>';
            json_encode($row, $name);
        }
    }else {
        echo '<option>No State Found!</option>';

    }
}

functions.js

function FetchCountry(id){
    $('#countries').html(''); 
    $('#states').html(''<option selected disabled>Select State</option>');
    $.ajax ({
        type:'post',
        url:'ajaxdata.php',
        data : {CountryId : id},
        success : function(data,){
            $('#states').html(data);
            console.log(data); //Log data
        }
    });
}
function FetchStates(id){
    $('#cities').html('');
    $.ajax ({
        type:'post',
        url:'ajaxdata.php',
        data : {StateId : id},
        success : function(data,){
            $('#cities').html(data);
            console.log(data);
        }
    });
}

index.php

<?php
include "database.php";
$query = "SELECT * FROM tblCountries";
?>

<!DOCTYPE html>
//CSS/JS/JQUERY here
 <head>
  <script src="functions.js">
 </head>
 <body>
  <div class="container">
   <form method="POST">
     <select id="countries" onchange="FetchCountries(this.value)">
      <option selected disabled>Select Country</option>
        <php?
             if ($result->num_rows > 0){
             while ($row = $result->fetch_assoc()){
             echo '<option value='.$row['CountryId'].'>'.$row['CountryName'].'</option>';
            }
          }
         ?>
     <select id="states" onchange="FetchStates(this.value)">
      <option selected disabled>Select State</option>
     <input type="text" id="search" class="form-control"></input>
     <button class="btn-Search" name="submit" type="submit"></button>
  </form>
  </div>
  <--Results Area -->
   <div class="container">
    <table id="cities"></table>
   </div>
 </body>
</html>

【问题讨论】：

同时显示您尝试过的 PHP AJAX 代码。如果您显示一些表格或框，那将是很好的，您想在什么基础上显示什么。
@JohnDoe，我已经包含了代码

标签： php jquery mysql ajax

【解决方案1】：

你应该把你的 sql 语句改成这样：

$query="SELECT Cities.CityId, Cities.CityName, Cities.CityInfo
FROM Cities
JOIN States ON Cities.StatedId_FK=States.StatedId
WHERE States.StatedId = '".$_POST['StateId']."'";

$query="SELECT Countries.CountryId, Countries.CountryName
FROM Countries
JOIN States ON Countries.CountryId=States.CountryId_FK
WHERE CountryId='".$_POST['CountryId']."'";

请参阅本教程： https://www.php-einfach.de/mysql-tutorial/mysql-left-join/

你可以这样做：

<input type="text" id="search" onkeyup="showCities(this.value) class="form-control"></input>

然后制作一个函数showCities，如函数FetchStates。

【讨论】：

贝图，返回$query后如何使用文本输入框在$query中搜索城市名？