带搜索框的从属下拉列表
Posted
技术标签:
【中文标题】带搜索框的从属下拉列表【英文标题】：Dependant Drop Down List With Search Box 【发布时间】：2021-08-18 10:54:09 【问题描述】：我有三张桌子：
-
国家 [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，我已经包含了代码 【参考方案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中搜索城市名？以上是关于带搜索框的从属下拉列表的主要内容，如果未能解决你的问题，请参考以下文章
javascript中怎样添加下拉列表框的option到指定位置