Php Ajax不响应选择下拉列表

使用CodeIgniter框架，我试图为具有子类别的类别创建一个下拉列表，并且子类别具有子类别等等…因此，当用户在下拉列表中选择第一级类别时，比如说“男性”，另一个下拉列表将出现在下面，我可以选择t恤衫，另一个下拉列表将显示长袖，它会一直持续到它有多深

我创建了一个列名为：id、category\u name和parent\u id的表，并能够检索到它：

public function get_categories($parent_id = 0){
  $this->db->from('all_categories');
  $this->db->where('parent_id', $parent_id);
  $result = $this->db->get();
  return $result->result_array();
}

然后，我有一个初始下拉列表，用于检索父\u id=0的所有行

<select class="theTarget">
  <?php
  echo "<option>Select Category</option>";
  foreach($getCategories as $row){
  echo "<option value=".$row['id'].">". $row['category_name']."</option>";
}
?>
</select> 
<div class="subCategories">
//subcategories will appear here...
</div>

然后，ajax将文章发布到文件fetch_subcategories.php，其中包含文章信息。在fetch_subcategories.php中，我有以下内容：

$categoryId = $_POST['categoryId'];

$query = "SELECT * FROM all_categories WHERE parent_id = {$categoryId}";

$result = mysql_query($query);

$html = "
        <select class='theTarget'>
            <option>Select Subcategory</option>
        ";
            while($row = mysql_fetch_array($result)){
                $html .="<option value=".$row['id'].">".$row['category_name']."</option>";
            }   
        $html .= "</select>";

if(mysql_num_rows($result)!=0){
    echo $html; 
}

$categoryId=$\u POST['categoryId']；
$query=“从父级\u id={$categoryId}的所有\u类别中选择*”；
$result=mysql\u query（$query）；
$html=”
选择子类别
";
while（$row=mysql\u fetch\u数组（$result））{
$html.=''.$row['category_name'.]；
}   
$html.=”；
如果（mysql_num_rows（$result）！=0）{
echo$html；
}

好极了，看起来还不错！这正是我想要它做的。我选择了男士，然后出现了一个下拉列表，上面有一件t恤。。。但当我选择t恤（t恤也有子类别）时，什么都没发生

这是我贴过的最长的帖子，这让我发疯。我错过了什么？或者如果有人能提出更好的方法

---

非常感谢。

尝试将JavaScript函数更改为：

$('form').on('change','.theTarget',function(){
    //Gets the value of the selected
    var categoryId = $(this).val();
    $.post('fetch_subcategories',{categoryId:categoryId}, function(data){
        $(this).after(data);
    });
});

---

假设您的HTML看起来像这样（请注意我所做的更改）：

我立即看到了一个问题，因为两个下拉列表都有相同的类

target

。因此，无论您为哪个下拉列表选择新选项，脚本都将运行。我会将您的脚本更改为如下所示：

$(function() {
  $('form').on('change','#dept',function(){
    //Gets the value of the selected
    var categoryId = $('option:selected', this).val();
    $.post('fetch_subcategories.php',{categoryId:categoryId}, function(data){
        $('.subCategories').html(data);
    });

  });
  $('form').on('change','#item',function(){
    //Gets the value of the selected
    var categoryId = $('option:selected', this).val();
    $.post('fetch_subsubcategories.php',{categoryId:categoryId}, function(data){
        $('.subsubCategories').html(data);
    });
    .... and so on ....
  });
});

---

将此函数添加到javascript非常简单

function show_dropdown() {
  $("form .theTarget").off("change").on("change", function() {
    var select  = $(this);
    var cat_id  = select.val();
    select.nextAll(".theTarget").remove();
    $.post( 'fetch_subcategories.php', { categoryId : cat_id }, function( data ) {
      if ( data ) {
        $(data).insertAfter( select );
        show_dropdown();
      }
    });
  });
}

然后在dom就绪事件中调用它

$(function() {
  show_dropdown();
});

您的html将是

<form>
  <select class="theTarget">
    <?php
      echo "<option>Select Category</option>";
      foreach( $getCategories as $row ) {
        echo "<option value=".$row['id'].">". $row['category_name']."</option>";
      }
    ?>
  </select>
</form>

---

注意：您不再需要

元素

我们可以在JSFIDLE或jsBin中查看整个表单吗？好的，我会继续，但是我从来没有使用过JSFIDLE，我现在会尝试一下JSFIDLE或jsBin是否运行php和sql？我似乎找不到它。当使用JSFIDLE或jsBin时，你不会复制PHP脚本，只复制源HTML，就像你在浏览器中选择

查看源代码时看到的那样。这对我很有帮助，我不得不调整一些东西，谢谢！
function show_dropdown() {
  $("form .theTarget").off("change").on("change", function() {
    var select  = $(this);
    var cat_id  = select.val();
    select.nextAll(".theTarget").remove();
    $.post( 'fetch_subcategories.php', { categoryId : cat_id }, function( data ) {
      if ( data ) {
        $(data).insertAfter( select );
        show_dropdown();
      }
    });
  });
}

$(function() {
  show_dropdown();
});

<form>
  <select class="theTarget">
    <?php
      echo "<option>Select Category</option>";
      foreach( $getCategories as $row ) {
        echo "<option value=".$row['id'].">". $row['category_name']."</option>";
      }
    ?>
  </select>
</form>