Question

使用CodeIgniter框架，我正在尝试为具有子类别的类别创建下拉列表，并且该子类别具有子类别等等...因此，当用户选择第一级别的类别时，在下拉列表中显示“男性”列表，下面会出现另一个下拉列表，我可以选择T恤，另一个下拉列表会显示长袖，直到它有多深。

我创建了一个包含列名称的表：id，category_name和parent_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();
}

然后我有了初始下拉列表，它检索了所有具有parent_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>

到目前为止看起来不错..

现在我的脚本中有：

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

});

然后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; 
}

好看还好看！它完全符合我的想法。我选择了Men然后出现了一个下拉式并且有T恤......但是当我选择T恤（T恤也有子类别）时没有任何反应。

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

非常感谢。

Answer 1

尝试将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);
    });
});

Answer 2

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

<form>
<div class="categories">
<select class="theTarget" name="department" id="dept">
<option value="0">Select Category</option>
<option value="1">Men</option>
<option value="2">Women</option>
<option value="3">Boys</option>
<option value="4">Girls</option>
<option value="5">Aliens</option>
</select>
</div> 
<div class="subCategories">
<select class="theTarget" name="items" id="item">
<option value="0">Select Category</option>
<option value="1">T-shirts</option>
<option value="2">Hats</option>
<option value="3">Outerwear</option>
<option value="4">Underwear</option>
<option value="5">Socks</option>
</select> 
</div>
</form>

你写的 jQuery 就是：

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

  });
});

我立即看到了一个问题，因为两个下拉列表都有相同的类theTarget。因此，无论您选择哪个下拉列表，脚本都会运行。我会将您的脚本更改为：

$(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 ....
  });
});

Answer 3

简单地将此功能添加到您的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 ready事件中调用它。

$(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>

注意：您不再需要<div class="subCategories">元素

Ajax没有响应选择下拉列表

3 个答案: