Update select options based on another control's value?

[robincornett]

I’m working on converting a featured content widget to a block. The initial choice for the widget is to select the post type. In the widget, I use ajax to dynamically update the next two select fields–taxonomy and then term based on the post type (or changing the taxonomy updates the term list as well).

I’ve got the ajax call copied over to my Gutenberg script and can retrieve the data needed in the onchange event for the first selector (post_type). Where I’m stuck is updating the options for a different select element–I cannot seem to hit on the right function to update/replace the options in the taxonomy/term dropdowns (on the block–the widget does it just fine, but the block requires a different approach).

I’ve found this tutorial, which seems to be tackling a similar problem, but I haven’t figured out how to translate it to what I’m doing.

I’m hoping that someone here has done something similar and can get me pointed in the right direction. TIA

[Zac Gordon]

Hi!

I’m not really what the problem is you’re describing. Could you explain on this please, maybe share your code too

“Where I’m stuck is updating the options for a different select element–I cannot seem to hit on the right function to update/replace the options in the taxonomy/term dropdowns (on the block–the widget does it just fine, but the block requires a different approach).”

As a general note, you probably should be using the new Data models and not making your own api calls as they won’t be as integrated.

Hope can help if you don’t mind explaining a little more the problem.

[robincornett]

Sure, I can try to clarify. I’ve extracted my onChange function into a gist. Since I’d already done all of the data retrieval work for the ajax action for the widgets panel once, I wanted to reuse as much of it as I could.

Basically, I have three selectControl elements: post_type, taxonomy, and term. THey are initially populated as Post, Categories, and “any”. On the widgets admin screen, when Post is changed to another post type, the taxonomy and term select controls are updated with the relevant lists of taxonomies/terms (the terms list is also cued to update if the taxonomy is changed).

The ajax call works and properly retrieves the updated lists of options. Where I’m stuck is how to affect the dependent controls. I’ve got a line marked in the code where I’ve determined that I can affect the value of a dependent control, but what I really want to change is the list of options.

On the widgets admin screen, where I started with this code, I know the ID of the dependent select elements, and basically I clear out the options and replace them with the list I’ve just retrieved with the ajax call. That doesn’t seem to be possible here–or, maybe it could be possible, but I haven’t explored that as it seems like it’s probably not the approved way of doing it.

I hope that helps clarify–thank you for any help!

[robincornett]

Actually, I can swap out the options pretty much the same as I do on the widgets/customizer screens, and it’s working. I just need to fine tune it. There may be a preferred Gutenberg way to do it, but this is working for now.

[Author]

Posts