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

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

ただいまの
回答率

90.84%

  • PHP

    18629questions

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

  • WordPress

    6410questions

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

  • Ajax

    1004questions

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

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 114

murama2

score 53

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' );
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • mts10806

    2018/06/11 20:30

    「うまくいかない」だけでは起きている現象は伝わりません。具体的に記載してください。 https://teratail.com/help/question-tips#questionTips3-4-1

    キャンセル

  • mts10806

    2018/06/11 20:31

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

    キャンセル

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

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    18629questions

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

  • WordPress

    6410questions

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

  • Ajax

    1004questions

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