eimintas

<style>
    .select2-results__option--disabled {
        display: none !important;
    }
</style>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        setTimeout(function () {
            $('.forminator-custom-form').trigger('after.load.forminator');
        }, 100);

        $(document).on('after.load.forminator', function (event, form_id) {
            if (event.target.id == 'forminator-module-1431') { // Change the form ID
                // Mapping of fields
                console.log("loaded");
                var select_fields = {};
                select_fields['.wpmudev-relative-select-field-1'] = ['.wpmudev-relative-select-field-2'];

                // Define the mapping of values from the first dropdown to the corresponding values in the second dropdown
                var valueMapping = {
                    'Aberdeen-(GB)': ['Kirkwall-(GB)', 'Lerwick-(GB)'],
                    'Ajaccio-(FR)': ['Marseille-(FR)'],
                    'Ancona-(IT)': ['Igoumenitsa-(GR)', 'Patras-(GR)', 'Split-(HR)'],
                    // Add more mappings as needed
                };

                jQuery.each(select_fields, function (index, item) {
                    // On selection
                    $(index + ' select').on('change', function () {
                        var sel_value = $(this).val(); // Get the selected value from the first dropdown
                        var mappedValues = valueMapping[sel_value];

                        $(item + ' select option').each(function () {
                            var option_value = $(this).val();
                            // Check if the option value is in the mapped values array
                            if (mappedValues.indexOf(option_value) !== -1) {
                                $(this).removeAttr('disabled');
                            } else {
                                $(this).attr('disabled', 'disabled');
                            }
                        });
                    });
                });
            }
        });
    });
</script>

Great news, with the help of ChatGPT and the previous code provided, i’ve managed to achieve my goal, for those who are trying to make a similiar function.

select_fields are css classes for dropdown 1 and dropdown 2

var valueMapping are the choices to be shown in dropdown 2 field, based on choice selected in the first one, the remaining choices are hidden (use internal values for choices).

forminator-module-1431 replace 1431 with your own form ID (from form shortcode)

Thanks again for helping me ??

Hi @wpmudevsupport3

Very grateful for your provided code
I’ve managed to get it working by adding it inside HTML element using Elementor, because the function inside mu-plugins was not working for some reason :D.
Thank you again, I will try to customise it to achieve my original request.

The given snippet will only remove the options from other select fields if it is selected in any of the existing select fields.

Could you please check based on the mentioned workflow and see whether it fits your needs? If yes, we could check further on what’s missed on the given snippet on your side as it should have worked as instructed.

Hi @wpmudevsupport11

I suppose the function of the given snippet will do for now, but I’ve tried it with 2 choice fields, the second one has the same choices (and internal values) + additional values, but upon selection nothing is being hidden in either of the fields.
I’ve double checked everything, the form name is correct inside the PHP code, CSS classes are applied. Cleared cache and swapped form load method. Browser console is not returning any errors/messages

Hey, @wpmudev-support8

I appreciate you replying to my request.

I’ve done everything based on your instructions. Currently, i see no difference in how the form works. How do i configure which <options> should be hidden based on choice? Because I assume this code only returns the selected value from chosen choice fields? Or am I missing something.
Previously i tried code such as : $(‘.forminator-select2 option[value=”myValue”]’).hide(); ,but none could hide certain <options>. Thanks

• This reply was modified 1 year, 5 months ago by eimintas.
• This reply was modified 1 year, 5 months ago by eimintas.

Thanks for your reply,

Althought I would like to hide certain Choices (not the whole field), for example: first choice field is Country and the second one would be City, so I would want to show certain cities based on chosen country

Thank you, works great!