Syncing Dropdown values with Dependencies

Resolved yellowhippo
(@yellowhippo)

3 years, 7 months ago
Hello,

I have two dropdown selectors, both with the same series of values (50, 100, 500, 1000). I have created a script so that when you change the value of one dropdown, the other changes as well to match. This is all working fine.

The problem is…each dropdown value also has a dependency, so when a value is selected, a separate field appears. But this dependency does not trigger when using this script.

Here is what I have so far:

— #dropdownA —
50 (show field 1)
100 (show field 2)
500 (show field 3)
1000 (show field 4)
```
-- #dropdownB --
50 (show field 5)
100 (show field 6)
500 (show field 7)
1000
```
(show field 8)

My script:
```
jQuery(document).ready(function($) {
var $selects=$('#dropdownA,#dropdownB').change(function(){
    $selects.not(this).val( $(this).val() );
})
```
Any help with getting the dependencies to work with this script would be greatly appreciated!

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author codepeople
(@codepeople)

3 years, 7 months ago
Hello @yellowhippo

You must trigger an onchange event after assigning the value:

$selects.not(this).val( $(this).val() ).change();

But this code generates another issue. You would have an endless loop. So, you need some flag to avoid the endless loop.

Assuming the dropdown fields in your form are the fieldname1 and fieldname2, respectively, the script to use would be:
```
<script>
fbuilderjQuery(document).one('showHideDepEvent', function () {	
    var $ = jQuery,
	$selects = $('[id*="fieldname1_"],[id*="fieldname2_"]').change(function () {
		if(typeof flag != 'undefined') {
			delete flag;
			return;
		}
		flag = true;
		$selects.not(this).val($(this).val()).change();
	});
});
</script>
```
Best regards.
- This reply was modified 3 years, 7 months ago by codepeople.
Thread Starter yellowhippo
(@yellowhippo)

3 years, 7 months ago

Unbelievable – that worked brilliantly. Thank you for the solution and the speedy reply. You guys are incredible!
Thread Starter yellowhippo
(@yellowhippo)

3 years, 7 months ago
Another question – how would I ammend this for more dropdowns, for example 6. I have tried the following:
```
<script>
fbuilderjQuery(document).one('showHideDepEvent', function () {	
    var $ = jQuery,
	$selects = $('[id*="fieldname1_"],[id*="fieldname2_"],[id*="fieldname3_"],[id*="fieldname4_"],[id*="fieldname5_"],[id*="fieldname6_"]').change(function () {
		if(typeof flag != 'undefined') {
			delete flag;
			return;
		}
		flag = true;
		$selects.not(this).val($(this).val()).change();
	});
});
</script>
```
The problem is this runs very slow before executing all dependencies. Is there a better way to update this to accommodate more dropdowns?

Thank you again!
- This reply was modified 3 years, 7 months ago by yellowhippo.
Plugin Author codepeople
(@codepeople)

3 years, 7 months ago
Hello @yellowhippo

There is a different problem in your code. You should not delete the flag variable until update every dropdown field. Please, edit your code as follows:
```
<script>
fbuilderjQuery(document).one('showHideDepEvent', function () {	
    var $ = jQuery,
	$selects = $('[id*="fieldname1_"],[id*="fieldname2_"],[id*="fieldname3_"],[id*="fieldname4_"],[id*="fieldname5_"],[id*="fieldname6_"]').change(function () {
		if(typeof flag != 'undefined') return;
		flag = true;
		setTimeout(function(){delete flag;}, 1000);
		$selects.not(this).val($(this).val()).change();
	});
});
</script>
```
Best regards.
Thread Starter yellowhippo
(@yellowhippo)

3 years, 7 months ago

This solution works perfectly. Thank you so much!

You’ve provided some great support and I’d like to leave a review or donation. Can you please let me know how best I can do this?

Plugin Author codepeople
(@codepeople)

3 years, 7 months ago

Hello @yellowhippo

Thank you very much. You can leave a review in the plugin page:

https://ww.wp.xz.cn/support/plugin/calculated-fields-form/reviews/

Best regards.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Syncing Dropdown values with Dependencies’ is closed to new replies.