Javascript 基于另一个'；s使用变量/函数选择_Javascript_Php_Ajax_Html Select_Forms

Javascript 基于另一个'；s使用变量/函数选择

javascript php ajax forms

Javascript 基于另一个'；s使用变量/函数选择,javascript,php,ajax,html-select,forms,Javascript,Php,Ajax,Html Select,Forms,我有两个从数据库上的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->

我有两个从数据库上的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>";
?>

及

第一个是NHL中的团队列表。第二张是该队球员的名单。我试图使第二个选项在第一个选项更改时更新（基于“选项”的“值”）。要使其工作，需要更新第二段代码中的$team变量。既然PHP是服务器端的，不能动态更新，我该怎么做呢？即使使用AJAX，答案似乎也不明显。我使用的方法完全是有缺陷的吗？

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

首先，编写一个onchange事件处理程序，它使用ajax将“team”选项发送到服务器端，然后编写一个php来接收“team”选项，从数据库中检索播放器信息，然后将数据重新格式化为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/Ajax更新第二个下拉框
函数更新数据（v）
{
var value=v.options[v.selectedIndex].value；
$（“#number”）.empty（）；//空的“数字”下拉框
if（value！=“”）//确保没有向服务器端提交空值
{
jQuery.post（“getResult.php”，“type=“+value，updateEnumber”）；
}
}
函数updateEnumber（数据）
{
var numberData=jQuery.trim（data.split（“\n”）；//按“\n”拆分服务器端响应
var编号=document.getElementById（“编号”）；
对于（i=0；我知道第一步是进行更改：（例如）。第二部分是我迷路的地方。我在这方面是一个完全的初学者，我找不到任何不让我感到困惑的东西。哦，好吧，我会继续找。“第二部分”是指“将数据发送到服务器端”或“将响应发送到客户端”或“解析服务器端响应并更新网页”？“解析服务器端响应并更新网页”“。你完全不知道我在那里。你的服务器端响应数据格式是什么？你能使用jquery吗？你的服务器端响应是什么？你能提供一个例子吗？问题是这两个都应该在启动时显示，并且在每次更改选择时都应该更新。我需要刷新这部分代码（第二个PHP代码段），但我不知道如何做到这一点，老实说，AJAX让我害怕，因为我是这种编程的初学者。。。
    <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
    $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
        }
    }       
?>