javascript - 如何生成动态下拉菜单 PHP Javascript mySQL

Question

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

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

问题解决了!我已经编辑了我的答案以使用数据库，假设基本用户 root 并且没有密码。酒店表有 3 列，id、类别和名称。

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>

getter.php

<?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>';
?>

出现下拉列表后有点卡在这里了。我在 https://css-tricks.com/dynamic-dropdowns/ 上找到了一篇文章但他们没有数据库的示例，我希望有人能帮助我解决这个问题，因为我知道我很可能需要 AJAX 来从数据库/服务器请求数据并填充第二个下拉列表。我不是要求填鸭式，但我对 AJAX 的了解真的很少。任何指导都会有所帮助!

已编辑

只有部分关键字被传递的问题已经解决，感谢 Mark Ng 发现我的标记错误!非常感谢您帮助我回答问题，谢谢!

Answer 1

示例概念。有 2 个选择(下拉)，第一个将根据其类别填充第二个。

第一次选择

<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填充)

<div id="fetchHotelNameByAreaResult">
<!--For temporary only, this select was purposely placed inside this div id, it will get re-written by javascript when result are generated-->
<select>
    <option value="0">Please select area above first</option>
</select>
</div>

JS(原生)

<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 = "./php/find_hotel_name_by_area.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>

php 查询(select 将通过 javascript 返回给 div id="fetchHotelNameByAreaResult"

<?php
if($_POST['SearchValue']) {
    $searchname = $_POST['SearchValue']
    //.... your query
    //"SELECT * FROM hotel WHERE Category = '$searchname'";
    echo '<select class="blablabla">';
    while ($row_hotelselect = mysqli_fetch_assoc($hotelselect)) {
        echo "<option value=" . $row_hotelselect['id'] . "> " . $row_hotelselect['Name'] . " </option>";
        }
    }   
    echo '</select>';
    ?>      

这是怎么回事？1. 第一次选择时，onchange 被触发，调用函数 fetchHotel ...2. JS 向服务器发送数据，php 文件将处理请求，onreadystate... 将检测响应是否准备就绪，innerHTML 将使用 php 生成的 resposeText 重写 div id="fetchHotelNameByAreaResult"中的内容脚本。

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

编辑以解决此问题。

Hey there again, the codes above works fine. But however, I realised that the dropdown list only passes one part of the value inside the variable (eg. ritz carlton, only passes ritz to the next form). Anyone aware of any solutions?

存在 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.
?>