WordPress内のセレクトタグを条件に応じて書き換える方法

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


WordPressを勉強するにあたって一番最初に購入した参考書です。掲載されている無料テーマ「Bizvektor」は非常に扱いやすいテーマです。

いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応 (「いちばんやさしい教本」シリーズ)


Contact Form 7 の設定

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

select1

このような形であらかじめ「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()」で要素を新たに追加してます。

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

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

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

一昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました(笑)

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発「 Excel VBA 」を活用した効率化ツールの開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク