将选择下拉列表发送到另一个选择下拉列表

Question

我正在创建一个网站来学习编码，并正在制作 2 个选择下拉菜单，其中 1 个将从数据库表中填充 -> cat。另一个选择下拉菜单将从 table -> subcat 填充。 cat 和 subcat 的数据库如下所示：

餐桌猫

id (int 15) ||猫（varchar 75）||数字（整数 3）

表子目录

id (int 15) ||子猫（varchar 75）||目录号（int 3）

每个 subcat 行都有一个与 cat -> number 中的行相对应的 catnumber。因此，例如，如果我们在 Cat 中有一行餐厅，其编号为 2，那么如果我们还有 American Food 和 Chinese Food，其 catnumber 为 2，那么它们是对应的。

这是我从数据库中提取所有 3 个猫下拉菜单的代码。

<p><b>Cat1:</b><br />
<?php
  $query="SELECT id,cat FROM cat";
  $result = mysql_query ($query);
  echo"<select name='cselect1' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."</option>";

  }

  echo"</select>";
?>

<!-- Next CAT -->

<p><b>Cat2:</b><br />
<?php
  $query="SELECT id,cat FROM cat";
  $result = mysql_query ($query);
  echo"<select name='cselect2' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."</option>";

  }

  echo"</select>";
?>

<!-- Next CAT -->

<p><b>Cat3:</b><br />
<?php
  $query="SELECT id,cat FROM cat";
  $result = mysql_query ($query);
  echo"<select name='cselect3' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']."</option>";

  }

  echo"</select>";
?>

这是我的所有 3 个 subcat 下拉列表的数据库提取代码

<p><b>Subcat1:</b><br />
<?php
  $query="SELECT * FROM subcat WHERE catnumber='1' ";
  $result = mysql_query ($query);
  echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

  }

  echo"</select>";
?>
<p><b>Subcat2:</b><br />
<?php
  $query="SELECT id,subcat FROM subcat WHERE catnumber='1' ";
  $result = mysql_query ($query);
  echo"<select name='sselect2' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

  }

  echo"</select>";
?> 
<p><b>Subcat3:</b><br />
<?php
  $query="SELECT id,subcat FROM subcat WHERE catnumber='1' ";
  $result = mysql_query ($query);
  echo"<select name='sselect3' class='e1'><option value='0'>Please Select A Category</option>";
  // printing the list box select command
  while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
  echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";

  }

  echo"</select>";
?>

因此，现在所有子猫选择都在尝试获取编号为 1 的猫的所有子类别（即餐厅）。如何获取 cat select 上选择的任何内容（无需刷新页面）相应的 subcat select 显示对应的 subcat 列表中的猫的数量？

^ 非常抱歉做了一个糟糕的工作来解释它。最后我基本上想要它就像 Yelps -> here

感谢大家的帮助！

Answer 1

您需要进行 ajax 调用以在后台查询数据库，然后返回结果（以 HTML 格式）并填充您的子类别选择。

<select name="cat" id="cat">...</select>
<select name="subCat" id="subCat">...</select>

<script language="javascript">
    $('#cat').change(function() {
        $.post('getSubcat.php', {
           cat: $(this).val()
        }, function(data) {
            $("#subCat").html(data);
        }
    });
</script>

确保您的 getSubcat.php 脚本将结果显示为

<option value='whatever'>Label</option>
<option value='whatever2'>Label2</option> ...

getSubcat.php 将是一个简单的查询/输出脚本：

<?php
$category = $_POST['cat'];

$query = "SELECT * FROM subcategories WHERE parent_category = " . $category;
$result = mysql_query($query);

echo "<option value='0'>Select a subcategory</option>";
while($row = mysql_fetch_array($result)) {
    echo "<option value='" . $row['id'] . "'>" . $row['subcategory_name'] . "</option>";
}

注意：这使用 jQuery - 确保您的页面包含 jQuery 库

<script src="http://code.jquery.com/jquery-latest.min.js"></script>