Support

Account

Home Forums General Issues Show sub-repeater options based on parent-repeater option selected

Solving

Show sub-repeater options based on parent-repeater option selected

  • Is this possible?

    I have a repeater. This repeater contains a text field and a repeater field. The sub-repeater field contains a text field. It looks like this:

    <REPEATER>
    Option 1 (text field)
    <REPEATER>
    Sub-Option1 1 (text field)
    Sub-Option1 2 (text field)
    Sub-Option1 3 (text field)
    </REPEATER>
    Option 2 (text field)
    <REPEATER>
    Sub-Option2 1 (text field)
    Sub-Option2 2 (text field)
    Sub-Option2 3 (text field)
    </REPEATER>
    Option 3 (text field)
    <REPEATER>
    Sub-Option3 1 (text field)
    Sub-Option3 2 (text field)
    Sub-Option3 3 (text field)
    </REPEATER>
    </REPEATER>

    I’m attempting to use this setup to populate a 2nd dropdown select based on a first down select.

    So if I choose Option 2 from the first dropdown, it would display the text fields for that options sub-repeater in a 2nd dropdown.

    Hope that makes sense.

  • I’ve included some images to help explain this better.

    The first image is simply outputting the data on the front end.
    The second image shows the acf admin fields.

    Basically, the Grades (5.5, 6, 6.5) would be included in the first dropdown and depending on which one is selected, it would show the size fields in the next dropdown.

  • To do this you will need to write JavaScript. You will need to attach an event to the first field that makes an AJAX request to the values for the second field and populate the values.

    Alternately you can create a script that gets localized with all of the values.

    Sorry, I do not have example code that I can supply for this.

    Here is an example https://stackoverflow.com/questions/5861090/populating-one-select-box-based-on-the-selection-in-another-select-box-jquery

    Info on AJAX in WP https://codex.wordpress.org/AJAX_in_Plugins

    Info on localizing scripts: https://developer.wordpress.org/reference/functions/wp_localize_script/

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.