Dynamic Taxonomy Terms selection based on selected Taxonomy

[Web10-Joris]

Hi,
I'm curious if it's possible to create a field, possibly with a custom field type, where CP users can select a taxonomy from the native Taxonomy-fieldtype. Then, the subsequent field should only display the Terms from the selected taxonomy (Taxonomy Terms Fieldtype). Is it feasible to create a new field type that combines these two existing field types, but with the added functionality of a relational dynamic dropdown? If so, what would be the best approach to accomplish this?

Quick example:
Taxonomy X has terms: 1,2,3
Taxonomy Y has terms: A,B,C

If a user selects X in the first field (Taxonomy), then the dropdown in the next field (Taxonomy Terms) should display only 1, 2, 3.

[edalzell]

ya you'll probably need a custom fieldtype that has both drop downs in it

[Web10-Joris]

Okay. And how to achieve this? I know the basics about Vue & Custom Fieldtypes, but not how to link both fields and retrieve + store the data of the taxonomies & terms correctly. I would really appreciate it if someone has some tips as a starting point :)

[edalzell]

The data you want will be in the VueX store (you can see it with the FF/Chrome Vue dev tools). Then you add a watch (in Vue) on the store data you want (the taxonomy) and update the terms.

That's how I'd approach it.

[Jamiecordeiro12]

Yes, it's possible to create a dynamic dropdown where the options in one dropdown determine the options in another. First, you have to create two dropdowns and write a JavaScript listen for changes in first dropdown. When taxonomy is selected, use JavaScript to update the second dropdown with correct terms. Publix Passport

[edalzell]

Found some addons to help:

• https://statamic.com/addons/3dstudio/dynamic-select
• https://statamic.com/addons/eminos/field-item-relationship