PHP - 根据用户输入更新下拉列表中的值

Question

我的 php 表单中有 2 个下拉列表。下拉列表中的值将从数据库（mysql）中检索。我已经运行了第一个下拉列表。但现在我需要根据用户的选择更新第二个下拉列表。第二个下拉菜单中显示的值将根据用户的选择而有所不同。

当用户从第一个下拉列表中选择一个选项后，如何更新另一个下拉列表的值？我在 SO 上搜索并看到了类似的问题，但没有得到回答。希望能在这里得到一些帮助。谢谢。以下是我当前的代码。

附言。如果我要创建一个 html 表单，我需要在启动时运行 php 脚本，而不需要任何输入来填充第一个下拉列表。我怎么会这样？我只知道如何根据输入发送请求；例如。 <input type=submit>

.php

<?php
$conn = mysql_connect("127.0.0.1","root","")
mysql_select_db(MyApp,$conn);


$sql2=("SELECT App.AppName FROM App);               


$result2=mysql_query($sql2); 
echo '<select name="sublist">';
echo '<option value=""></option>';

while ($row2 = mysql_fetch_assoc($result2))
{
    echo '<option value="' . $row2['AppName'] . '">' . $row2['AppName']. '</option>';
}
echo '</select>';                                           
?>

Answer 1

您有两种解决方案。

1. 完全用 PHP 做（我不推荐，因为它对用户不太友好）
2. 基于 Ajax（更加用户友好）

但是，要以良好的方式执行这两件事，您需要 Javascript 的支持

所以，如果我向您解释解决方案之一。一旦用户更改您的第一个下拉列表。您必须使用 onChange() 事件将您的页面发布到同一页面。然后在您的页面中设置与第一个下拉列表相同的第二个下拉列表的元素。

第二种解决方案需要 AJAX。一旦用户更改了第一个下拉列表，您就可以向页面发出 AJAX 请求。在该页面中，您可以看到用户所做的选择。然后您基于此生成第二个下拉列表。在这里您可以使用三种方法来获取第二个下拉列表或其数据。

一个。您从该页面生成所有选项并发回。设置第二个下拉菜单的 innerHTML。

b.以 JSON 格式获取数据并基于此填充您的下拉列表。

c。获取 AJAX XML 并在此基础上填充您的下拉列表。

Answer 2

有不止一种方法可以做到这一点：

1) 向服务器发送一个带有用户选择的请求，检索第二个选择框的内容并显示它。这也可以通过两种方式完成 a) AJAX——因此页面不会刷新（流畅的用户体验） b) 刷新整个页面——（实现更简单）

2) 加载所有组合，然后根据用户的选择，显示特定的下拉菜单。仅当您的下拉菜单很少且组合很少时，这才可行（就不生成大页面而言）。

正如another poster 所指出的，所有方法都需要JavaScript（在某种程度上）才能运行。请详细说明哪种方法是可取的，我会进一步详细说明

Answer 3

查看源代码以复制代码。 JQuery 有一种方法可以使这变得简单。我使用了我定制的表单创建器。但这里是输出 - 手动方式。

这是您的 ajax 文件。它放在 JS 或标题中。

    function getXMLObject()  //XML OBJECT
    {
       var xmlHttp = false;
       try {
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
       }
       catch (e) {
         try {
           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
         }
         catch (e2) {
           xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
         }
       }
       if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
         xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
       }
       return xmlHttp;  // Mandatory Statement returning the ajax object created
    }

    var xmlhttp = new getXMLObject();   //xmlhttp holds the ajax object

    function makeAjaxRequest(url, params, output, image) {
      var getdate = new Date();  //Used to prevent caching during ajax call
      if( image == 1 ){
          document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>'; 
      }
      if(xmlhttp) { 
        xmlhttp.open("POST",url,true); //calling testing.php using POST method
        xmlhttp.onreadystatechange = function(){
           if (xmlhttp.readyState == 4) {
             if(xmlhttp.status == 200) {
               document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element 
             }
             else {
    //          alert("Error during AJAX call. Please try again");
             }
           }    
        }
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.send(params); //Posting txtname to PHP File
      }
    }

    function makeAjaxGetRequest(url, output, image) {
      var getdate = new Date();  //Used to prevent caching during ajax call
      if( image == 1 ){
          document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>'; 
      }
      if(xmlhttp) { 
        xmlhttp.open("GET",url,true); //calling testing.php using GET method
        xmlhttp.onreadystatechange = function(){
           if (xmlhttp.readyState == 4) {
             if(xmlhttp.status == 200) {
               document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element 
             }
             else {
    //          alert("Error during AJAX call. Please try again.");
             }
           }    
        }
        xmlhttp.send(null); //Posting txtname to PHP File
      }
    }

    function emptyAjaxReportBox(id)
    {
        document.getElementById(id).innerHTML= '';
    }

这是用户导航到的文件：

// your call file; what you posted above.  Obviously change the names and Id's to match what you need.
<form  id="testFormId"  name="testForm"  action="post" >
<select  id="firstSelectId"  name="firstSelect"  onchange="makeAjaxRequest('url', 'firstSelect='+encodeURIComponent(document.getElementById('firstSelectId').value),'outputDivId', '0');" >
</select>
<div  id="outputDivId" >
<select name="secondInput">Whatever values you want to load up can go in here.  They can be the default values; meaning, if select 1 value = 0, then you have have these values in select 2.  Once you change select 1, this will disappear and be replaced by what your ajax returns.  Therefore, for easy processing after you submit the form, you should make this select 2 the same name and id as what you use in the ajax.</div>
</form>

这是根据 ajax 请求调用的文件。

//your AJAX file needs to be a separate page than what you're currently reading.  Put whatever you want in there.
$db = connectioninfo;
$query;
echo 'What you put in the echo is what will show up in the outputDiv.  <select></select>';