WordPressの検索フォームに「ラジオボタンの選択肢に応じて、セレクトボックスの中身が変わる」機能を実装する。Javascript(jQuery)で。

<form action="<?php echo esc_url(home_url('/')); ?>" method="get">
 <table>
  <tr class="parent-tr">
   <th>
    <div class="th-inner">
     <img src="<?php echo get_template_directory_uri() ?>/assets/img/search.svg" alt="検索">検索項目
    </div>
   
   
   </th>
   <td>
    <label>
      <input name="parent" type="radio" value="目的別" checked>
       目的別
    </label>
    <label>
      <input name="parent" type="radio" value="カテゴリー別">
       カテゴリー別
    </label>
   </td>
  </tr>


  <tr class="keyword-tr">
   <th>
    <div class="th-inner">
     <img src="<?php echo get_template_directory_uri() ?>/assets/img/genre.svg" alt="ジャンル">ジャンルを探す
    </div>
   </th>
   <td>
    <div class="select-wrapper">
     <select name="purpose" id="search-select" class="postform">
      <option value="指定しない">指定しない</option>
      <?php
        $terms = get_terms('purpose',['hide_empty' => false]);
        foreach ( $terms as $term ) {
         echo "<option class='level-0' value='$term->slug'>$term->name</option>";
        }
      ?>
     </select>



     <div class="select-btn">
      <img src="<?php echo get_template_directory_uri() ?>/assets/img/bottom-arrow.svg" alt="arrow">
     </div>
    </div>
   </td>
  </tr>
 </table>


 <input type="hidden" name="post_type" value="article">
 <input type="hidden" name="s">
 <button class="submit-btn" type="submit">
   この条件で探す
 </button>


</form>

<script>
 let purpose = {
  <?php
   $terms = get_terms('purpose',['hide_empty' => false]);
   foreach ( $terms as $term ) {
    echo $term->slug.":'".$term->name."',";
   }
  ?>
 }
 let category = {
  <?php
   $terms = get_terms('article-cat',['hide_empty' => false]);
   foreach ( $terms as $term ) {
    echo $term->slug.":'".$term->name."',";
   }
  ?>
 }


 jQuery('input[name="parent"]:radio').change(function(){
  let parent = jQuery(this).val();
  if(parent == '目的別') {
   searchOption(purpose);
   jQuery('#search-select').attr('name','purpose');
  } else {
   searchOption(category);
   jQuery('#search-select').attr('name','article-cat');
  }
  })


 function searchOption(n) {
  jQuery('#search-select option').remove();
  jQuery('#search-select').append('<option class="level-0" value>指定しない</option>');
  jQuery.each(n, function(property,value){
   jQuery('#search-select').append('<option class="level-0" value=' + property + '>' + value + '</option>');
  })
 }

</script>

1. 1. まず、JavaScript内で2つのオブジェクト（purposeとcategory）を定義している。これらのオブジェクトは、それぞれWordPressのカスタムタクソノミーである「purpose」と「article-cat」から取得したタームのスラッグと名前を保持している。PHPのforeach文を使ってタームを取得し、オブジェクトのプロパティとして出力している。
   2. 次に、ラジオボタンの値が変更されたときに実行されるイベントリスナーを設定している。ラジオボタンの値が「目的別」の場合、searchOption関数をpurposeオブジェクトを引数として呼び出し、さらに検索フォームのselect要素のname属性を「purpose」に設定する。それ以外の場合は、searchOption関数をcategoryオブジェクトを引数として呼び出し、select要素のname属性を「article-cat」に設定する。
   3. searchOption関数では、まず引数として渡されたオブジェクトのプロパティを検索フォームのselect要素に追加する前に、既存のoption要素を削除する。次に、「指定しない」というデフォルトのoption要素を追加する。最後に、引数として渡されたオブジェクトのプロパティを反復処理し、それぞれのプロパティと値を使用して新しいoption要素を追加する。

PHP,Javascriptの基本を理解していれば、実装できる内容

なので、PHP,Javascript学びたて、というフェーズの方は、本機能実装にトライしてみると、いい復習の機会になる気もします。