0

使用 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; 
}

很好看还是很好看！它完全符合我的要求。我选择了男士，然后出现一个下拉菜单，里面有 T 恤……但是当我选择 T 恤（T 恤也有子类别）时，什么也没有发生。

这是我发布过的最长的帖子，这让我发疯。我在这里想念什么？或者，如果有人可以提出更好的方法来做到这一点？

非常感谢。

4

3 回答 3

0

尝试将您的 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);
    });
});
于 2013-07-06T20:08:20.830 回答
0

假设您的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);
    });

  });
});

立即，我看到一个问题，因为两个下拉列表具有相同的 class 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 ....
  });
});
于 2013-07-06T20:09:40.077 回答
0

很简单的将此函数添加到您的 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>

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

于 2013-07-06T20:18:38.093 回答