Home Forums General Issues Pre-selecting choices in a select2 field in the front-end.


Pre-selecting choices in a select2 field in the front-end.

  • I’m developing a WordPress website where users can log in and update their user profiles in the front-end. In the back-end, a series of ACFs have been added to the Users where the data is stored.

    In the back-end, there is a select2 field attached to each User called ‘Areas of professional interest’.

    I’ve recreated this field in a form in the front-end (using select2), and it has the same list of pre-set options (or choices). I’ve built it so that when the user makes their selections and presses ‘Update’, the form updates the select2 field in the back-end. It does this using update_field.

    However, I don’t know how to also update the form in the front-end. When I click ‘Update’, I want the select2 field in the front-end to ‘pre-select’ the chosen choices stored in the back-end. Can anyone guide me in the right direction?

    Much appreciated, Nick.

  • Is the front end field an ACF field or your own implementation of Select2?

    If it was an ACF field this wouldn’t be an issue, so I’m assuming that it’s the latter.

    You would need to get the values in the ACF field and add them to JavaScript loaded by the page to set the selections. I don’t have any examples of this. Basically you’l need to localize your JS to make the values available on the page and then use the values in the Select2 initialization. You’d have to figure out how to do this with Select2.

  • Thank you for the prompt reply, John. Much appreciated.

    I am indeed using a Select2 implementation in the front-end, as opposed to the ACF form. This is because I can’t seem to customise the ACF form in the way that I’d like to – for this particular project, at least. But I’ve used the ACF form many times before.

    Since your response though I’ve managed to figure out a PHP-only solution using get_field_object. It’s a little rogue perhaps, but it seems to have done the trick.

    Here’s my solution:

    <select id="user_professional_interest" name="user_professional_interest[]" multiple="multiple" style="width: 100%">
    <option value="business" <?php $interests = get_field_object('user_professional_interest', 'user_'.$MyUser->ID); if( $interests && in_array('business', $interests) ) { ?>selected="selected" <?php } ?>>Business, consulting and management</option>
    <option value="charity" <?php $interests = get_field_object('user_professional_interest', 'user_'.$MyUser->ID); if( $interests && in_array('charity', $interests) ) { ?>selected="selected" <?php } ?>>Charity and voluntary work</option>

    As I don’t need to dynamically change the options in the select field, I can hardcode them into the template. Using get_field_object, I retrieve the selected choices from the ACF field in the back-end (in this case, attached to a User). Then, for each option in the list, I check whether or not its value is included in the array. If it’s included, I add selected="selected" to the option.

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

The topic ‘Pre-selecting choices in a select2 field in the front-end.’ is closed to new replies.