如何生成动态下拉PHP Javascript mySQL

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

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

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

booking.php

 Preferred Hotel: 
  Please select area above first <?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 " " . $row_hotelselect['Category'] . " "; } ?>   
 
  Please select area above first  
  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; } } }   

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''; while ($row_preferredhotel = mysqli_fetch_assoc($preferredhotel)) { echo " " . $row_preferredhotel['Name'] . " "; } }echo ''; ?> 

在显示下拉列表后，有点卡在这里。 我在https://css-tricks.com/dynamic-dropdowns/上发现了一篇文章，但他们没有数据库的示例，我希望有人可以帮助我，因为据我所知，我很可能需要AJAX来请求对于来自数据库/服务器的数据并填充第二个下拉列表。 我不是要求喂食 ，但我对AJAX的线索确实很少。 任何指导都会有所帮助！

EDITED

感谢Mark Ng发现我的标记错误，只有部分关键字被传递的问题已经解决了！ 非常感谢你在回答我的问题时给予的帮助，谢谢！

Answer 1

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

第一选

  North South East West  

第二次选择（以后用javascript填充）

 
   Please select area above first   

JS（母语）

php查询（选择将通过javascript返回到div id =“fetchHotelNameByAreaResult”

 '; while ($row_hotelselect = mysqli_fetch_assoc($hotelselect)) { echo " " . $row_hotelselect['Name'] . " "; } } echo ''; ?> 

到底是怎么回事？ 1.在第一次选择时，onchange被触发，调用函数fetchHotel ... 2. JS将数据发送到服务器，其中一个php文件将处理请求，onreadystate ...将检测响应是否准备好，而innerHTML将重新使用php脚本生成的resposeText写入div id =“fetchHotelNameByAreaResult”中的任何内容。

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

编辑以解决此问题。

嘿，再次，上面的代码工作正常。 但是，我意识到下拉列表只传递变量内部值的一部分（例如，ritz carlton，只将ritz传递给下一个forms）。 有谁知道任何解决方案？

有一个HTML标记错误。

 echo "" . $var . ""; //The above will return ritz carlton 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 "" . $var . ""; // echo ""; // echo ""; //a lot more ways to achieve same result. //These will return ritz carlton in html. This will set the value as ritz carlton and the value "ritz carlton" will be posted. ?> 

Answer 2

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

1. 首先在第一个下拉菜单后面创建一个部分，根据第一个下拉菜单中选择的类别，将获取酒店名称。 示例：

     
    // hotel drop down  

2. 之后，创建一个ajax请求，该请求将从第一个下拉列表中获取类别名称，并将请求发送到php文件以获取与所选类别名称相对应的酒店名称并进行下拉。

   示例：

     $.ajax({ url : "hotelfetch.php",// function to create hotel dropdown data : {categoryName : $('.hotelCategory').val()} success : function(data){ //generate dropdown of hotel name }); }); 

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