Question

我有两个从数据库上的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，答案似乎也不明显。我是否完全使用了一种有缺陷的方法？

Answer 1

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

Answer 2

首先，写一个onchange事件处理程序，它使用ajax将“team”选项发送到服务器端，然后编写一个php来接收客户端的“团队”选项，从客户端检索来自DB的播放器信息，之后以XML或json格式重新格式化数据，发送到客户端。

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

这是解决问题的合理流程。您可以去谷歌搜索上面的关键字以获取示例代码。

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

import numpy as np
import matplotlib.pyplot as plt

data = np.random.random((10,10))

# To make a standalone example, I'm skipping initializing the 
# `Figure` and `FigureCanvas` and using `plt.figure()` instead...
# `plt.draw()` would work for this figure, but the rest is identical.
fig, ax = plt.subplots()
ax.set(title='Click to update the data')
im = ax.imshow(data)

def update(event):
    im.set_data(np.random.random((10,10)))
    fig.canvas.draw()

fig.canvas.mpl_connect('button_press_event', update)
plt.show()

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

    <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>

基于另一个变量/函数选择的填充下拉列表

2 个答案: