使用php和javascript处理动态下拉框

Question

I am trying to create a dynamic drop down box that accesses MySQL once a selection has been made. The second box depends on the first box selection. I am not too familiar with javascript but I came across some code that seemed to be what I was looking for but is not executing and I don't know why. The first part of the code is the option fields with the javascript and the second part is the dynamicdd.php. Any help would be great. Thank you.

<tr>
    <td>Country:  </td>
    <td>
        <select name="Countrybox" onchange="getlocation(this.value)">
            <option value="none"> Please Select </option>

            <?php
              $qry2 = "Select Country from Locations";
              $populate = mysqli_query($conn, $qry2);

              while ($run = mysqli_fetch_assoc($populate)){
                echo "<option value='".$run['Country']."'>".$run['Country']."</option>";
              }
            ?>
        </select>
    </td>
</tr>


<tr>
    <td>Location:</td>
    <td>
        <select name="Locationbox" id="locationbycountry">
            <option> Select Above First </option>
        </select>
    </td>
</tr>

<script type="text/javascript">
function getlocation(locationarea) {
    var xhttp = new XMLHttpRequest();
    var url = "dynamicdd.php";
    var data = new FormData();
    data.append('SearchValue', locationarea);
    xhttp.open('POST', url, true);
    xhttp.send(data);
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("locationbycountry").innerHTML = xhttp.responseText;
        }
    }
}
</script>

dynamicdd.php

<?php

if($_POST['SearchValue']){
  $host = "localhost";
  $username = "root";
  $password = "";
  $db = "Work";

  $conn = mysqli_connect($host, $username ,$password, $db);

  $choice = $_POST['SearchValue'];

  $sql = "SELECT * FROM locations WHERE Country = '$choice'";

  $result = mysqli_query($conn, $sql) or die(mysqli_error($conn));

  while ($row = mysqli_fetch_assoc($result)){
    echo "<option value='".$row['Location']."'>".$row['Location']."</option>";
  }

}


 ?>

Answer 1

Your HTML is formed well enough, but you have errors in your PHP script. Try the following code which corrects some simple typos:

<?php
if($_POST['SearchValue']){
  $host = "localhost";
  $username = "root";
  $password = "";
  $db = "";

  $conn = mysqli_connect($host, $username ,$password, $db);

  $choice = $_POST['SearchValue'];

  $sql = "SELECT * FROM Locations WHERE country = '$choice'";

  $result = mysqli_query($conn, $sql) or die('error');

    while ($row = mysqli_fetch_assoc($result)){
      echo "<option value='".$row['location']."'> ".$row['location']." </option>";

    }
}
?>

Also, please be sure to look more into Select2, which is a really well-supported replacement for standard select boxes. https://select2.org/

Answer 2

try change javascript part with this (it will trow messagebox and you will see is script fail before end):

    <script type="text/javascript">
            function getlocation(locationarea) {
                var xhttp = new XMLHttpRequest();
                var url = "dynamicdd.php";
                var data = new FormData();
                data.append('SearchValue', locationarea);
                xhttp.open('POST', url, true);
                xhttp.send(data);
                alert("*step 1*");
                xhttp.onreadystatechange = function() {
                        alert("*step 2*");
                        if (xhttp.readyState == 4 && xhttp.status == 200) {
                        alert("*step 3*");
                        alert(xhttp.responseText);
document.getElementById("locationbycountry").innerHTML = xhttp.responseText;
                        }
                    }
                alert("*step 4*");
                }
    </script>





<?php
    if($_POST['SearchValue']){
      $host = "localhost";
      $username = "root";
      $password = "";
      $db = "";

      $conn = mysqli_connect($host, $username ,$password, $db);

      $choice = $_POST['SearchValue'];

      $sql = "SELECT * FROM Locations WHERE country = '$choice'";

      echo $sql;
    }
    else {
       echo "value is not posted";
    }
?>