MW WP Formでセレクトボックスに連動して他のセレクトボックスの選択肢を変える

前回に続いてMW WP Formネタ。

結論から言うとJavaScriptでかなり強引に対処するしか無いです。もちろん切替部分についてはJSでの実装が必要なのは言うまでもないですが……。

ここでは選択肢Aの内容に基づいて選択肢Bの選択肢が変わるというケースを想定しています。
例えばレストランの予約で、コースの選択（選択肢A)に基づいて、メインディッシュ（選択肢B）が「豚肉or魚or鳥」か「牛肉or鹿肉or海老」のいずれかのグループから一つ選べるように切り替わるようなイメージ。

最初はJSで選択肢B(select B)の内容(option)を選択肢A(select A)の選択内容で書き換えればええんやろ？と思っていたのですが、それでは動かず。
なぜならMW WP Formは全選択肢の内容をFormで渡しており、その選択肢に含まれるかどうかを検証していたからです。

なので選択肢Bの選択肢には、選択肢Aの全パターンを選択した場合の全選択肢を列挙しておき、optionを必要に応じて非表示にする方法で対処することで実現が可能です。
ここでは選択肢Aが「ノーマルコースorプレミアムコース」であり、ノーマルの場合は選択肢Bが「豚肉or魚or鳥」になり、プレミアムの場合「牛肉or鹿肉or海老」から選べるようにするケースを想定します。
この場合、管理画面上で選択肢Bの内容は「豚肉or魚or鳥or牛肉or鹿肉or海老」としておき、選択肢Aは「（空欄）orノーマルコースorプレミアムコース」としているとします。

そしてフォームの表示画面に以下のJSが含まれるようにすると、選択肢Aの選択内容に応じて選択肢Bの内容が切り替わることが確認できるかと思います。

jQuery(function(){
    const optionDisplayChanger = function(obj, is_display) {
        if (!is_display) {
            jQuery(obj).hide();
            if(jQuery(obj).parent().data("mode") != "wrap"){
                jQuery(obj).wrap("<span style='display:none' data-mode='wrap'>");
            }
        } else {
            jQuery(obj).show();
            if(jQuery(obj).parent().data("mode") == "wrap"){
                jQuery(obj).unwrap();
            }
        }
    }

    const courseChange = function() {
        const normal_course_options = ["豚肉", "魚", "鳥"];
        const premium_course_options = ["牛肉", "鹿肉", "海老"];

        if (jQuery("#place-selector").val() === "ノーマルコース") {
            jQuery("#app-selector option").each(function(){
                if (normal_course_options.indexOf(jQuery(this).val()) >= 0) {
                    optionDisplayChanger(this, true);
                } else {
                    optionDisplayChanger(this, false);
                }
            });
        } else if (jQuery("#place-selector").val() === "プレミアムコース") {
            jQuery("#app-selector option").each(function(){
                if (premium_course_options.indexOf(jQuery(this).val()) >= 0) {
                    optionDisplayChanger(this, true);
                } else {
                    optionDisplayChanger(this, false);
                }
            });
        } else {
            jQuery("#app-selector option[value!='']").hide();
        }
    }

    if (jQuery("#course-selector").length) {
        courseChange();

        jQuery("#course-selector").on('change', courseChange);
    }
});

関連記事

コメント