Conditional display for dropdown choices

Hi @eimintas

I hope you’re well today!

Currently this kind of behavior is not supported by our plugin out of the box. The conditional logic can only be applied to entire fields and not specific parts of it.

However, there’s a custom code that should help and here’s how to use it:

1. First, you need to add following code as MU plugin:

<?php
add_action('wp_footer', 'wpmudev_disable_select_options', 9999);
function wpmudev_disable_select_options() {
    if ( ! is_page( 'aanmeldformulier2' ) ) {
        return;
    }
	?>
	<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-623' ) { //Please change the form ID
				$('.wpmudev-relative-select-field select').each(function() {
					$(this).on('change', function(){
						$(this).find('option:selected').each(function() {
							var value = this.value;
                            if (value !== "") {
                                var id = $(this).parent().parent().parent().prop('id');
                                var options = $('.wpmudev-relative-select-field:not(#' + id + ') option[value=' + value + ']');
                                options.prop('disabled', true);
                            }
						});
					});
				});
			}
		});
	});
	</script>
	<?php
}

– create an empty file with a .php extension (e.g. “forminator-relative-select.php”)
– copy and paste code into it
– save the code and upload it to the “/wp-content/mu-plugins” folder of your site’s WordPress install

Note: if there’s no “mu-plugins” folder directly in “wp-content”, just create an empty one first.

2. Then you need to “configure” the code. That’s actually pretty simple:

in this line of code

if ( event.target.id == 'forminator-module-623' ) { //Please change the form ID

you need to replace number 623 with your form ID; form ID is the number you see in form’s shortcode.

3. and finally, you need to configure the form by adding this (note no dot in front!)

wpmudev-relative-select-field

into “Additional CSS classes” setting in “Styling” configuration of each of your “select” fields on that form.

Once you update the form and clear all caches, it should do the trick. Note: if it doesn’t work out of the box, you may need to switch on or off (opposite to as it is) the “Load Form using Ajax” switch in the “Behavior” settings of the form.

Best regards,
Adam

Hi @eimintas,

How do i configure which <options> should be hidden based on choice?

Please do note that what was shared in the snippet is more of a workaround, the above doesn’t show/hide the options based on the specific choices.

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.

Setting up a form to hide/show options based on a selection of different Select fields will be complex as it depends upon the options and their combinations. I’m afraid trying to provide a snippet which works as above will require a lot of custom coding and outside our support scope.

Best Regards,

Nithin

Hi @eimintas,

Hope this message finds you well.

I found an alternative mu-plugin and see if that you can customize it according to your needs.

The mu-plugin below is for 2 selects that contain the same values in both, if value 1 is selected in {select-1} then the value 1 will be removed in {select-2}, maybe this is closer to what you are trying to approach.

add_action('wp_footer', 'wpmudev_select_option_display_manage', 9999);
function wpmudev_select_option_display_manage() {
	global $post;
	if ( is_a( $post, 'WP_Post' ) && !has_shortcode($post->post_content, 'forminator_form') ) {
		return;
	}
	?>
	<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-6' ) { //Please change the form ID
				//Mapping of fields
				var select_fields = {};
				select_fields['#select-1'] 	= ['#select-2'];
				
				jQuery.each(select_fields, function(index, item) {
					//On selection
					$(index + ' select').on('select2:select', function(e) {
						var sel_value = $(index + ' select').find(":selected").val();
						$(item).each(function(i, ind) {
							$(ind + ' select option').each(function() {
								if ( $(this).val() == sel_value ) {
									$(this).attr('disabled', 'disabled');
								} else {
									$(this).removeAttr('disabled');
								}
							});
						});
					});
				});
			}
		});
	});
	</script>
	<?php
}

Please take a look and let us know.

Best regards,
Laura