フォーム内で選択肢を条件に応じて書き換えたいことがたまにあります。今回、問い合わせフォームの選択肢を最初の選択に応じて変更したいという要望を頂きましたのでとりあえずjQueryを使った簡単な方法をご紹介いたします。

Contact Form 7 の設定

今回、選択肢を条件分岐したいフォームは「Contact Form 7」を使っています。
先に「Contact Form 7」の方に設定を行います。

このような形であらかじめ「id」を設定しておくと楽です。

「functions.php」に追記

過去の投稿でも何度か紹介していますが、「functions.php」に追記して、自作のJavaScriptをWordPressで利用出来るようにします。

if (!is_admin()) {
function my_scripts() {
    //wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
    wp_enqueue_script( 'app', get_stylesheet_directory_uri() . '/js/app.js', array( 'jquery' ), '1.0.0', false );
}
  add_action( 'wp_enqueue_scripts', 'my_scripts' );
}

今回はjQueryを使うので「$deps」に「array( ‘jquery’ )」を記述します。
こちらも以前ご紹介していますが、そのまま記述するとWordPressでは$ ショートカットが使えないため、次のように記述します。

jQuery(function() {
    // ここにコードを書く
});

jsファイルの中身

細かい説明は省きますが、今回必要な記述はこんな感じです。

jQuery(function(){
jQuery('#your-select1').change(function() {
    var v = jQuery('#your-select1').val();
    switch(v){
    //選択肢が"aaa1"の場合
    case 'aaa1':
        jQuery('select#your-select2 option').remove();
        jQuery('#your-select2').append(jQuery('<option>').attr({ value: 'aaa2-ee1' }).text('aaa2-ee1'));
        jQuery('#your-select2').append(jQuery('<option>').attr({ value: 'aaa2-ee2' }).text('aaa2-ee2'));
        jQuery('select#your-select3 option').remove();
        jQuery('#your-select3').append(jQuery('<option>').attr({ value: 'aaa3-ff1' }).text('aaa3-ff1'));
        jQuery('#your-select3').append(jQuery('<option>').attr({ value: 'aaa3-ff2' }).text('aaa3-ff2'));
        break;
    //選択肢が"bbb1"の場合
    case 'bbb2':
        jQuery('select#your-select2 option').remove();
        jQuery('#your-select2').append(jQuery('<option>').attr({ value: 'bbb2-ee1' }).text('bbb2-ee1'));
        jQuery('#your-select2').append(jQuery('<option>').attr({ value: 'bbb2-ee2' }).text('bbb2-ee2'));
        jQuery('select#your-select3 option').remove();
        jQuery('#your-select3').append(jQuery('<option>').attr({ value: 'bbb3-ff1' }).text('bbb3-ff1'));
        jQuery('#your-select3').append(jQuery('<option>').attr({ value: 'bbb3-ff2' }).text('bbb3-ff2'));
        break;
    //選択肢が"bbb3"の場合
    case 'ccc3':
        jQuery('select#your-select2 option').remove();
        jQuery('#your-select2').append(jQuery('<option>').attr({ value: 'ccc2-ee1' }).text('ccc2-ee1'));
        jQuery('#your-select2').append(jQuery('<option>').attr({ value: 'ccc2-ee2' }).text('ccc2-ee2'));
        jQuery('select#your-select3 option').remove();
        jQuery('#your-select3').append(jQuery('<option>').attr({ value: 'ccc3-ff1' }).text('ccc3-ff1'));
        jQuery('#your-select3').append(jQuery('<option>').attr({ value: 'ccc3-ff2' }).text('ccc3-ff2'));
        break;
    //空白を再度選択した場合
    case '':
        jQuery('select#your-select2 option').remove();
        jQuery('#your-select2').append(jQuery('<option>').attr({ value: '' }).text(''));
        jQuery('#your-select2').append(jQuery('<option>').attr({ value: '※先にサンプル選択肢1を選択して下さい' }).text('※先にサンプル選択肢1を選択して下さい'));
        jQuery('select#your-select3 option').remove();
        jQuery('#your-select3').append(jQuery('<option>').attr({ value: '' }).text(''));
        jQuery('#your-select3').append(jQuery('<option>').attr({ value: '※先にサンプル選択肢1を選択して下さい' }).text('※先にサンプル選択肢1を選択して下さい'));
        break;
    };
});
});

your-select1の選択肢が変わったとき、your-select2とyour-select3の選択肢が書き換わります。「.remove()」で一度空にして「.append()」で要素を新たに追加してます。

自己紹介

松田 大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「 こどもICTかつしか教室 」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ