WordPressで第4階層まであるタームを動的にselectボックスに出力したくAjax機能を使っているのですが、タームに紐づいている子タームが複数あるとselectボックスに出力できずにいます。
表示としては、セレクトボックスが4つあり、1つ目は第1階層のターム、2つ目は第2階層のタームという風にセレクトボックスの数とタームの階層を合わせています。
下記の階層でいうと1つ目のセレクトボックスでコンテンツを選んだら、ajaxで2つ目のセレクトボックスにビジネス学習の選択肢が追加され、2つ目でそのビジネス学習を選択するとajaxで3つ目のセレクトボックスに語学の選択肢が追加され、3つ目のセレクトボックスで語学を選択しても複数の親となっているせいか4つ目のセレクトボックスには何も選択肢か追加されません
■ターム階層
コンテンツ
-ビジネス学習
—語学
—−英語
—−イタリア語
親タームに対して紐づいている物が一つの場合は、selectタグ内にoptionタグが正常に出力されます。
これは複数あった場合に配列として渡してあげないといけないのでしょうか?
もし、配列で渡さないといけない場合はどのようにしたらいいのでしょうか?
■selectボックス出力箇所
<div class="serchBox"> <span class="serch_title">サービス種別</span> <select class="parentSelect" name="item"> <option value="">---</option> <?php // 「会員様投稿」に紐づけてるカテゴリー情報取得 $categories = get_terms( 'ctcategory', Array('hide_empty' => false) ); if($categories): ?> <?php foreach($categories as $value): ?> <?php if(!$value->parent): ?> <option value="<?php echo $value->slug ?>"><?php echo $value->name ?></option> <?php endif; ?> <?php endforeach; endif; ?> </select> </div> <div class="serchBox ChangeBox childSelect"> <span class="serch_title">コンテンツ</span> <select class="allcontent change_select" name="genre"> <option value="">---</option> </select> </div> <div class="serchBox grandsonBox"> <span class="serch_title">コンテンツ2</span> <select class="allcontent change_select2" name="type"> <option value="">---</option> </select> </div> <div class="serchBox grandsonBox"> <span class="serch_title">コンテンツ3</span> <select class="allcontent change_select3" name="type2"> <option value="">---</option> </select> </div>
■footer.php
<script type="text/javascript"> $(function(){ //第一階層selectタグが変更された場合 $('.serchBox select').on('change', function(){ var cate_val = $(this).val(); if($(this).hasClass('change_select')){ $('.change_select2 option:not(:first-child)').remove(); }else if($(this).hasClass('change_select2')){ $('.change_select3 option:not(:first-child)').remove(); }else if($(this).hasClass('change_select3')){ }else{ $('.change_select option:not(:first-child)').remove(); } console.log(cate_val); $.ajax({ type: "POST", url: ajaxurl, data: { 'action': 'change_select', 'tar_id': cate_val, }, success: function(response){ jsonData = JSON.parse(response); $.each(jsonData, function(i, val){ options = '<option value="' + val['term_slug'] + '">' + val['term_name'] + '</option>'; console.log(options); // 第二階層セレクトボックスに値挿入 if($(this).hasClass('change_select')){ $(".change_select2").append(options); }else if($(this).hasClass('change_select2')){ $(".change_select3").append(options); }else if($(this).hasClass('change_select3')){ }else{ $(".change_select").append(options); } }); } }); return false; }); }); </script>
■functions.php
// admin-ajax.phpの読み込み function add_my_ajaxurl() { ?> <script> var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>'; </script> <?php } add_action( 'wp_head', 'add_my_ajaxurl', 1 ); // カテゴリー変更 function change_select_content(){ if($mes = $_POST['tar_id']): $categories = get_terms( 'ctcategory', Array('hide_empty' => false) ); $get_term = array(); if($categories): foreach($categories as $key => $value): if($value->slug == $mes): $pearentId = $value->term_taxonomy_id; endif; if($pearentId): if($value->parent == $pearentId): $get_term[$key] = array( 'term_name' => $value->name, 'term_slug' => $value->slug, ); endif; endif; endforeach; echo json_encode( $get_term ); endif; endif; die(); } add_action( 'wp_ajax_change_select', 'change_select_content' ); add_action( 'wp_ajax_nopriv_change_select', 'change_select_content' );
あなたの回答
tips
プレビュー