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);
    });

});

次に、投稿情報を含むファイル fetch_subcategories.php に ajax が投稿します。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);
    });

  });
});

両方のドロップダウンに同じクラスがあるため、すぐに問題が発生し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 に答える