如何生成动态下拉PHP Javascript mySQL

我需要使用PHP、Javascript和mySQL生成动态下拉列表的帮助。我不擅长AJAX和Javascript，因此我在这里寻求帮助

我有一个名为Hotel的表，其中包含一个酒店名称和类别的列表。它们按位置分类，如北部、南部、东部和西部。我试图允许用户选择他们想要的类别，然后第二个下拉列表将生成该特定类别下的可用酒店列表。如前所述，我不擅长AJAX或JS

问题解决了！我已经编辑了我的答案，以使用数据库，假设基本用户根，没有密码。table hotel有3列，id、category和name

booking.php

<div class="form-group">
<label class="control-label col-sm-3" for="PreferredHotel">Preferred Hotel:</label>
<div class="col-sm-3">
<select class="form-control" name="hotelCategory" onchange="fetchHotelNameByArea(this.value)">
<option value="0">Please select area above first</option>
<?php
mysqli_select_db($dbConn, $database_dbConn);
$query_hotelselect = "SELECT * FROM hotel GROUP BY Category";
$hotelselect = mysqli_query($dbConn, $query_hotelselect) or die(mysqli_error($dbConn));
$row_hotelselect = mysqli_fetch_assoc($hotelselect);
while ($row_hotelselect = mysqli_fetch_assoc($hotelselect)) {
echo "<option value='" . $row_hotelselect['Category'] . "'> " . $row_hotelselect['Category'] . " </option>";
}
?>
</select>
<?php 
echo $row_hotelselect;
?>
</div>
<div class="col-sm-3" id="fetchHotelNameByAreaResult">
<select class="form-control">
<option value="0">Please select area above first</option>
</select>
</div>
<script>
function fetchHotelNameByArea(HotelArea) {
//above (HotelArea) are actually the value (this.value) in the form which will be what the user select (North, South, East or West)
var xhttp = new XMLHttpRequest();
var url = "getter.php";//<- just a sample url
var data = new FormData();
//below will "assign HotelArea to $_POST['SearchValue']"
data.append('SearchValue', HotelArea);
xhttp.open('POST', url, true);
xhttp.send(data);
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("fetchHotelNameByAreaResult").innerHTML = xhttp.responseText;
}
}
}
</script>
</div>

<?php
if ($_POST['SearchValue']) {
$searchname = $_POST['SearchValue'];
require_once('Connections/dbConn.php');

mysqli_select_db($dbConn, $database_dbConn);
$query_preferredhotel = "SELECT * FROM hotel WHERE Category = '$searchname'";
$preferredhotel = mysqli_query($dbConn, $query_preferredhotel) or die("Could not select examples");
$row_preferredhotel = mysqli_fetch_assoc($preferredhotel);
echo'<select class="form-control" name="preferredHotel">';
    while ($row_preferredhotel = mysqli_fetch_assoc($preferredhotel)) {
        echo "<option value='" . $row_preferredhotel['Name'] . "'> " . $row_preferredhotel['Name'] . " </option>";
    }
}echo '</select>';
?>

首选酒店：
请先选择上面的区域
请先选择上面的区域
函数fetchHotelNameByArea（HotelArea）{
//上面（HotelArea）实际上是表单中的值（this.value），用户将选择该值（北、南、东或西）
var xhttp=newXMLHttpRequest（）；
var url=“getter.php”//

在出现下拉列表后，我有点被困在这里。我在上找到了一篇文章，但他们没有数据库的示例，我希望有人能帮助我，因为我知道我很可能需要AJAX从数据库/服务器请求数据并填充第二个下拉列表。我不是要求使用勺子馈送，但我关于AJAX我们几乎没有什么线索。任何指导都会很有帮助

已编辑

---

由于Mark Ng发现了我的标记错误，仅传递了部分关键字的问题已得到解决！我非常感谢您在回答我的问题时提供的帮助，谢谢！

我阅读了您的问题并理解了您的问题。 基本步骤：

首先，在您的第一个下拉列表后面创建一个部分，在该部分中，将根据在第一个下拉列表中选择的类别获取酒店名称。 例如：

    <div class = "hotelDropDown">
       // hotel drop down
    </div>

制作一个hotelfetch.php的视图文件，在其中根据获取的类别名称创建一个酒店名称下拉列表，并将其替换为我为您创建的类别下拉列表下面创建的html部分

---

我读了你的问题，理解了你的问题。 基本步骤：

首先，在您的第一个下拉列表后面创建一个部分，在该部分中，将根据在第一个下拉列表中选择的类别获取酒店名称。 例如：

    <div class = "hotelDropDown">
       // hotel drop down
    </div>

制作一个hotelfetch.php的视图文件，在其中根据获取的类别名称创建一个酒店名称下拉列表，并将其替换为我为您创建的类别下拉列表下面创建的html部分

示例概念。 有两个选择（下拉列表），第一个将根据其类别填充第二个

第一选择

<select onchange="fetchHotelNameByArea(this.value)">
    <option value="North">North</option>
    <option value="South">South</option>
    <option value="East">East</option>
    <option value="West">West</option>  
</select>   

北
南方
东
西

第二次选择（稍后由javascript填充）

请先选择上面的区域

JS（本地）

函数fetchHotelNameByArea（HotelArea）{
//上面（HotelArea）实际上是表单中的值（this.value），用户将选择该值（北、南、东或西）
var xhttp=newXMLHttpRequest（）；
var url=“./php/find_hotel_name_by_area.php”；//

发生了什么事？ 1.在第一次选择时，onchange被激发，调用函数fetchHotel。。。 2.JS将数据发送到服务器，php文件将在服务器上处理请求，onreadystate…将检测响应是否就绪，innerHTML将使用php脚本生成的resposeText重新写入div id=“fetchHotelNameByAreaResult”中的内容

还有其他方法可以通过jQuery等来实现，但一旦您了解了基本概念，就可以继续前进了

编辑以解决此问题

再说一遍，上面的代码很好用。但是，我意识到 下拉列表仅在 变量（如丽思卡尔顿，仅将丽思传递到下一个表单）。有人吗 知道有什么解决办法吗

存在html标记错误。

echo "<option value=" . $var . ">" . $var . "</option>";
//The above will return <option value=ritz carlton>ritz carlton</option> in html.
//the problem lies with value=ritz carlton as there is a space in between.
//html will think that it is value="ritz" while carlton is not a valid attribute, it will simply ignore it and only set the value as ritz, so only the value ritz was posted.

//In order to get the full string parse, you have to quote them like below.
echo "<option value='". $var ."'>" . $var . "</option>"; 
// echo "<option value=" . "'" . $var . "'" . "</option>";
// echo "<option value=/" " . $var . " /"</option>";
//a lot more ways to achieve same result.
//These will return <option value="ritz carlton">ritz carlton</option> in html. This will set the value as ritz carlton and the value "ritz carlton" will be posted.
?>

echo.“$var.”；
//以上内容将以html格式返回丽思卡尔顿酒店。
//问题在于value=丽思卡尔顿酒店，因为两者之间有一个空间。
//html会认为它是value=“ritz”，而carlton不是一个有效的属性，它会简单地忽略它，只将值设置为ritz，因此只发布了ritz的值。
//为了得到完整的字符串解析，您必须像下面那样引用它们。
回声“$var.”；
//echo“示例概念。
有两个选择（下拉列表），第一个将根据其类别填充第二个

第一选择

<select onchange="fetchHotelNameByArea(this.value)">
    <option value="North">North</option>
    <option value="South">South</option>
    <option value="East">East</option>
    <option value="West">West</option>  
</select>   


北
南方
东
西

第二次选择（稍后由javascript填充）


请先选择上面的区域

JS（本地）


函数fetchHotelNameByArea（HotelArea）{
//上面（HotelArea）实际上是表单中的值（this.value），用户将选择该值（北、南、东或西）
var xhttp=newXMLHttpRequest（）；
var url=“./php/find_hotel_name_by_area.php”；//

发生了什么事？
1.在第一次选择时，onchange被激发，调用函数fetchHotel。。。
2.JS将数据发送到服务器，php文件将在服务器上处理请求，onreadystate…将检测响应是否就绪，innerHTML将使用php脚本生成的resposeText重新写入div id=“fetchHotelNameByAreaResult”中的内容

还有其他方法可以通过jQuery等来实现，但一旦您了解了基本概念，就可以继续前进了

编辑以解决此问题

再说一遍，上面的代码很好用。但是，我意识到
下拉列表仅在
变量（如丽思卡尔顿，仅将丽思传递到下一个表单）。有人吗
知道有什么解决办法吗

存在html标记错误。
echo "<option value=" . $var . ">" . $var . "</option>";
//The above will return <option value=ritz carlton>ritz carlton</option> in html.
//the problem lies with value=ritz carlton as there is a space in between.
//html will think that it is value="ritz" while carlton is not a valid attribute, it will simply ignore it and only set the value as ritz, so only the value ritz was posted.

//In order to get the full string parse, you have to quote them like below.
echo "<option value='". $var ."'>" . $var . "</option>"; 
// echo "<option value=" . "'" . $var . "'" . "</option>";
// echo "<option value=/" " . $var . " /"</option>";
//a lot more ways to achieve same result.
//These will return <option value="ritz carlton">ritz carlton</option> in html. This will set the value as ritz carlton and the value "ritz carlton" will be posted.
?>

echo.“$var.”；
//以上内容将返回丽思卡尔酒店
echo "<option value=" . $var . ">" . $var . "</option>";
//The above will return <option value=ritz carlton>ritz carlton</option> in html.
//the problem lies with value=ritz carlton as there is a space in between.
//html will think that it is value="ritz" while carlton is not a valid attribute, it will simply ignore it and only set the value as ritz, so only the value ritz was posted.

//In order to get the full string parse, you have to quote them like below.
echo "<option value='". $var ."'>" . $var . "</option>"; 
// echo "<option value=" . "'" . $var . "'" . "</option>";
// echo "<option value=/" " . $var . " /"</option>";
//a lot more ways to achieve same result.
//These will return <option value="ritz carlton">ritz carlton</option> in html. This will set the value as ritz carlton and the value "ritz carlton" will be posted.
?>