使用变量/函数根据另一个人的选择填充下拉列表

Fill Dropdown Based on Another's Selection with a Variable/Function

本文关键字：一个人的 选择 填充 下拉列表 变量 函数      更新时间：2023-09-26

我有两个从数据库上的SQL查询生成的下拉列表。它们如下：

<?php
$conn = new mysqli('localhost', 'root', '', 'Rosters') 
or die ('Cannot connect to db');
$result = $conn->query("SELECT City, Name FROM Teams");
echo "<select name='Teams'>";
while ($row = $result->fetch_assoc()) {
              unset($city, $team);
              $city = $row['City'];
              $name = $row['Name'];
              $fullname = $city." ".$name;
              echo '<option value="'.$fullname.'">'.$fullname.'</option>';
 }
echo "</select>";
?>

和

<?php
$conn = new mysqli('localhost', 'root', '', 'Rosters') 
or die ('Cannot connect to db');
$team = "Chicago Blackhawks";
$result = $conn->query("SELECT Number, First, Last FROM `$team`");
echo "<select name='Players'>";
while ($row = $result->fetch_assoc()) {
              unset($number, $first, $last);
              $number = $row['Number'];
              $first = $row['First'];
              $last = $row['Last'];
              $fullname = $first." ".$last;
              echo '<option value="'.$fullname.'">'.$number." - ".$fullname.'</option>';
}
echo "</select>";
?>

第一个是NHL的球队名单。第二个是该团队的球员名单。我正在尝试使第二个在更改第一个时更新（基于"选项"的"值"）。为此，需要更新第二个代码片段中的 $team 变量。由于PHP是服务器端的，无法动态更新，我该怎么做？即使使用 AJAX，答案似乎也不明显。我是否完全使用了有缺陷的方法？

您必须在更改第一个下拉列表时使用 ajax，并从 ajax 调用 php 文件并将数据从 php 文件返回到 ajax 并将其显示在第二个下拉列表中。

首先，编写一个onchange事件处理程序，它使用ajax将"team"选项发送到服务器端，然后编写一个php从客户端接收"team"选项，从DB中检索玩家信息，然后将数据重新格式化为XML或json格式，发送到客户端。

最后，编写一个 javascript 函数来解析服务器端响应并更新网页。

这是解决问题的逻辑流程。你可以去谷歌搜索上面的关键字作为示例代码。

下面是一个简单的示例代码：HTML文件内容：

    <html>
  <head>
    <title>PHP/Ajax update 2nd drop down box base on 1st drop down box value</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script language=javascript>
      function updateData(v)
      {
        var value=v.options[v.selectedIndex].value;
        $("#number").empty(); //empty "digit" drop down box
        if (value!="") //Ensure no empty value is submitted to server side
        {
          jQuery.post("getResult.php","type="+value,updateNumber);
        }
      }
      function updateNumber(data)
      {
        var numberData=jQuery.trim(data).split("'n");//split server side response by "'n"
        var number=document.getElementById("number");
        for (i=0;i<numberData.length;i++)
        {
          value=numberData[i].split("-")[0];//get value from server response 
          text=numberData[i].split("-")[1]; //get text from server response 
          option=new Option(text,value);    //for better IE compatibility
          number.options[i]=option;         
        }
      }
    </script>
  </head>
  <body>
    <h1>PHP/Ajax update 2nd drop down box base on 1st drop down box value Demo</h1>
    No number type
    <select id=type name="type" onchange="updateData(this)">
      <option value="">Please select</option>
      <option value="1">Odd No.</option>
      <option value="0">Even No.</option>
    </select>
    Number
    <select id="number" name="number">
    </select>
  </body>
</html>

php 文件（文件名：getResult.php）

    <?php
    $type=htmlspecialchars($_POST["type"]);
    if ($type=="1")
    {
        echo "1-one'n";//Ends-with 'n for client side getting data from server side response
        echo "3-three'n";//Ends-with 'n for client side getting data from server side response
        echo "5-five'n";//Ends-with 'n for client side getting data from server side response
        echo "7-seven'n";//Ends-with 'n for client side getting data from server side response
    }
    else
    {
        if ($type=="0")
        {   echo "2-two'n";//Ends-with 'n for client side getting data from server side response
            echo "4-four'n";//Ends-with 'n for client side getting data from server side response
            echo "6-six'n";//Ends-with 'n for client side getting data from server side response
            echo "8-eight'n";//Ends-with 'n for client side getting data from server side response
        }
    }       
?>
相关文章：