当前位置: 首页 > 面试题库 >

填充下拉菜单-PHP Ajax MySQL

司空奕
2023-03-14
问题内容

我的HTML页面上有2个下拉列表:第一个下拉列表包含数据库列名称,第二个下拉列表将基于该数据库列名称进行填充,

我有一个带有字段的表:<Student Name, Degree, City>以下是条目;

1. "A", "BS", "New York"
2. "B", "BS", "Chicago"
3. "C", "MS", "Boston"
4. "D", "MS", "New York"

因此,我的第一个下拉列表将包含列名称,即“ Degree”和“ City”。

如果我选择“学位”,则第二个下拉列表将填充“ BS”和“ MS”;如果我选择“城市”,则第二个下拉列表应选择“纽约”,“波士顿”和“芝加哥”。

我该如何进行实施?

[添加我的代码]:

changeSecond(first)方法与您建议的完全相同

<body>
   <form method="POST" action="" name="mainForm">
      <table>
         <tr>
            <td> Filter by: </td>
            <td>
            <div id="first">
               <select onChange="changeSecond(this.value)">
                  <option value="1">All</option>
                  <option value="2">Degree</option>
                  <option value="3">City</option>
               </select>
            </td>
         </tr>
         <tr>
            <td>&nbsp</td>
            <td>
               <div id="second">
                  <select name="val">
                     <option value=""></option>
                  </select>
               </div>
            </td>
         </tr>
      </table>
   </form>
</body>

这是您建议的second_script.php:

<?
   $link = mysql_connect("localhost", "root", "");

   if (!$link)
   {
      die('Could not connect: ' . mysql_error());
   }
   if (mysql_select_db("myDatabase", $link))
   {
      $first=mysql_real_escape_string($_REQUEST["first"]);
      $query="SELECT ".$first." FROM myTable GROUP BY ".$first;
      $data=mysql_query($query);

      echo "<select id=\"second\">";
      while($row=mysql_fetch_row($data))
      {
         echo "<option value=\"".$row[0]."\">".$row[0]."</option>";
      }
      echo "</select>";
   }
   echo mysql_error();
?>

问题答案:

如果您想要一个更动态的解决方案(可以容纳对后台数据库的更改),则可以在页面上执行以下操作:

<script>
        function changeSecond(first){
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
        {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            var res=xmlhttp.responseText;
            document.getElementById("second").innerHTML=res;
            }
          }
        xmlhttp.open("GET","second_script.php?first="+first,true);
        xmlhttp.send();
        }
        </script>
...
<select onChange="changeSecond(this.value)">
<option value="Degree">Degree</option>
<option value="City">City</option>
</select>
<div id="second"><select><option value=""></option></select></div>

然后是一个类似于以下内容的脚本:

<?php
//database connection
$first=mysql_real_escape_string($_REQUEST["first"]);
$query="SELECT ".$first." FROM tablename GROUP BY ".$first;
$data=mysql_query($query);
echo "<select>";
while($row=mysql_fetch_row($data)){
echo "<option value=\"".$row[0]."\">".$row[0]."</option>";
}
echo "</select>";
?>

我想为了获得真正的灵活性,您还想在上面类似的另一个脚本中使用mysql_field_name动态填充第一个



 类似资料:
  • 问题内容: 我打算根据其他下拉菜单的选择使用AJAX填充下拉框。我遵循了使用位于此处的jQuery的教程-http: //remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery- ajax/ ,并在选择框名称中更改了选择框ID名称。在脚本中。 当主复选框的值发生更改时,将发送ajax并返回如下: 这与教程代码中返回的JS

  • 问题内容: 我有这样的MySQL表 区域表 … 和学校表 我的注册表中有多个选择(下拉)菜单。区域下拉列表如下所示 我想做的是,获取“区域” ID,然后基于“学校”表中的ID(先前选择的ID)填充学校下拉菜单。我是JS的新手。请帮助我修复它。提前谢谢。 问题答案:

  • 问题内容: 嗨,我想使用Ajax在下拉菜单上管理数据。 数据库字段: 1.id 2.名称 3.部门 myDesgin.php 1.如果我选择了一个下拉菜单,要更改另一个下拉菜单,则取决于使用Ajax选择的值。 2.是否有可用的代码,如果我选择一个下拉菜单,它将转到另一个子窗口并使用 Ajax 以表格式(如报告)显示数据。 提前致谢。 请给我示例代码,因为我是ajax的初学者,如果有人提供带有代码的

  • 问题内容: 我正在建立一个网站来学习编码,并且正在尝试建立一个工具,用户单击一个选择/下拉列表,其中包含从数据库 cat 提取的某些类别名称,然后另一个选择与从数据库 subcat 提取的子类别名称一起出现。这几乎与Yelp的(向下分类)完全一样,就像Yelp的(向下分类)一样。 我还做了一个图: 我已经有一个从 cat 数据库中提取的类别下拉列表: 我有一个从subcat数据库中提取的subca

  • 问题内容: 我从我的C#网络方法中以这种格式重新获得了JSON: 我现在有一个asp.net下拉列表。好吧,它呈现为带有id 的html下拉列表。 我收到有关AJAX请求的成功警报。如何将这些结果填充到我的#city下拉列表中? 试过这个: 问题答案: 以下是在回调内部应做的事情: 示例: http : //jsfiddle.net/z2D8f/ 或一次附加全部HTML的替代方法,这可能会更快:

  • 问题内容: 我正在尝试制作一个简单的CSS下拉菜单,当您将鼠标悬停在链接上时,将显示子菜单。当您将鼠标悬停在li上时,我已经设法实现了这一点,但无法弄清楚如何使用链接来实现。 我之所以尝试使用链接而不是li来执行此操作,是因为我的菜单宽度为100%,并且li所占的面积比链接大,因此,如果将鼠标悬停在该区域上,则不显示该子菜单不想。 我的CSS如下: 问题答案: 如果可能的话,我会避免使用JS。这不