Combobox列出基于另一个组合框中所选项目的项目

Question

我有一个使用PHP，MySQL和JavaScript的例程。有两个表：tbl_category和tbl_subcategory就像这样：

tbl_category

1. CAT_ID
2. cat_name

tbl_subcategory

1. scat_id
2. cat_parent_id
3. cat_name

他们有一些信息，如

tbl_category：

1. 裤子
2. 鞋
3. T恤衫

tbl_subcategory：

1. 1牛仔裤
2. 1 Heavy Duty
3. 2 Boots
4. 2凉鞋
5. 3长袖
6. 3短袖
7. 3 Polo

我在文件头中输入了javascript库的链接：

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

当然我之前从jquery网站（较新版本）下载。

我现在有脚本例程：

<script type="text/javascript">

  $(document).ready(function(){
     $("select[name=cat_id").change(function(){
        $("select[name=scat_id]").html('<option value="">Loading...</option>');
        $.post("ajax_subcategory.php",
              {cat_id:$(this).val()},
              function(valor){
                 $("select[name=scat_id]").html(valor);
              }
              )
     })
  })

现在我有了表单，选择字段Category预先加载了来自表tbl_category的数据：

<form name="form" method="post" action="" enctype="multipart/form-data">
<table width="100%" border="0" cellspacing="6" cellpadding="0">
<tr>
   <td align="right">Category:</td>
   <td><select name="cat_id" >
          <option value="0">Choose category</option>
    <?php
             $sql1 =mysql_query("SELECT * FROM tbl_category ORDER by cat_name")or die(mysql_error());
            while($row = mysql_fetch_array($sql1))
            {
               echo ("<option value=\"$row[cat_id]\"" . ($sql1 == $row["cat_name"] ? " selected" : "") . ">$row[cat_name]</option>");  
            }
          ?></select> 
   </td>
</tr>
<tr>
   <td align="right">Sub-category:</td>
   <td><select name="scat_id" selected="selected" >
       <option value="0">Waiting category...</option>
       </select> 
   </td>
 </tr>
 </table>
 <input type="submit" name="submit" value="Submit"/>
 </form>

然后php文件名为ajax_subcategory：

<?php

include "../connect_to_mysql.php";

$cat_id = $_POST['cat_id'];

$sql1 =mysql_query("SELECT * FROM tbl_subcategory WHERE cat_parent_id='$cat_id' ORDER by cat_name")or die(mysql_error());
while($row = mysql_fetch_array($sql1))
 {
    echo ("<option value=\"$row[scat_id]\"" . ($sql1 == $row["scat_name"] ? " selected" : "") . ">$row[scat_name]</option>");  
 }
 ?>

完成！一切看起来都很完美。当我在第一个组合中选择项目时，我可以看到正在运行的Javascript和正在加载...但是第二个ComboBox始终为空 无论我选择哪个项目都显示为空并变小（宽度）。

这是一个很好的例行公事，我看到其他网站在网上工作。

你们可以帮我找一个解决方案吗？

由于

Answer 1

首先，您需要按照一步一步的故障排除来分析数据。在你的情况下，这就是我要做的事情：

1. 在发布之前检查cat_id：

   $("select[name=cat_id").change(function(){
        alert($(this).val());
   

2. 按原样在mysql_query（ajax_subcategory页面）中打印字符串，并检查查询是否有效。直接在MySQL控制台或phpMyAdmin中尝试此查询并检查其输出。

3. 分析ajax响应：在Chrome中使用FireBug或网络标签，检查Ajax响应。有时，您的ajax_subcategory页面会生成一些PHP警告或通知。

注意：我不明白为什么要检查条件$ sql1 == $ row [“cat_name”]。 $ sql1将是一个资源ID，根据您的查询，$ row ['cat_name']是一个表示您的子类别名称的字符串。

另外，不推荐使用mysql_ *函数，强烈建议不要使用它们。使用mysqli_ *函数或PDO。

Answer 2

请将$row["scat_name"]更改为$row["cat_name"]

<?php

    include "../connect_to_mysql.php";

    $cat_id = $_POST['cat_id'];

    $sql1 =mysql_query("SELECT * FROM tbl_subcategory WHERE cat_parent_id='$cat_id' ORDER by cat_name")or die(mysql_error());
    while($row = mysql_fetch_array($sql1))
     {
        echo ("<option value=\"$row[scat_id]\"" . ($sql1 == $row["cat_name"] ? " selected" : "") . ">$row[cat_name]</option>");  
     }
     ?>