質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

2082閲覧

WordPressにてAjaxでのカテゴリー受け渡し方法について

murama2

総合スコア113

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/06/11 10:48

編集2018/06/11 11:45

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/06/11 11:31

また、念のため「親」と「子」にあたる入力コントロールを明記してください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問