Dynamically populate select field with value/label pair, not just value!

• revive

• December 2, 2021 at 11:33 pm

The current ACF example to dynamically populate a select field only shows how to populate the values. So, when a user on the frontend views the options within the select field, they see the Values, not the Labels.

Example – select list value/label pairs below allow a user to select an icon (using Value as the class on an element):

Select options are:

fa-lg fas fa-wifi : Wifi
fa-lg fas fa-sink : Sink
fa-lg fas fa-restroom : Restroom
fa-lg fas fa-hand-sparkles : Clean

The element would be:
<div class="content-box-icon <?php the_field('left_box_icon') ?>"></div>

IF, I populate all these select lists with a textarea from an options page, using the values/labels from above, based on the ACF example linked above using this code:

/* LOAD ICON SELECT OPTIONS FROM OPTIONS PAGE TEXTAREA */
function acf_load_icon_field_choices( $field ) {
    // reset choices
    $field['choices'] = array();
    // get the textarea value from options page without any formatting
    $choices = get_field('icon_values', 'option', false);
    // explode the value so that each line is a new array piece
    $choices = explode("\n", $choices);
    // remove any unwanted white space
    $choices = array_map('trim', $choices);
    // loop through array and add to field 'choices'
    if( is_array($choices) ) {
        foreach( $choices as $choice ) {
            $field['choices'][ $choice ] = $choice;
        }
    }
    // return the field
    return $field;
}
add_filter('acf/load_field/name=left_box_icon', 'acf_load_icon_field_choices');

The user sees this in the select list:

fa-lg fas fa-wifi : Wifi
fa-lg fas fa-sink : Sink
fa-lg fas fa-restroom : Restroom
fa-lg fas fa-hand-sparkles : Clean

instead of the Labels, they see BOTH the values and the labels. And, that is what is printed out in the code. So, the element looks like this:
<div class="content-box-icon fa-lg fas fa-wifi : Wifi"></div>
instead of
<div class="content-box-icon fa-lg fas fa-wifi"></div>

Using the first option as an example, the desired outcome would be for the user to see ‘Wifi’ as an option, and when selected, the code snippet would echo ‘fa-lg fas fa-wifi’.

How can we resolve this?

• revive

• December 3, 2021 at 12:01 am

Found the solution:

function acf_load_icon_field_choices( $field ) {
    // reset choices
    $field['choices'] = array();
    // get the textarea value from options page without any formatting
    $choices = get_field('icon_values', 'option', false);
    // explode the value so that each line is a new array piece
    $choices = explode("\n", $choices);
    // remove any unwanted white space
    $choices = array_map('trim', $choices);
    // loop through array and add to field 'choices'
    if( is_array($choices) ) {
        foreach( $choices as $choice ) {
            $exploded = explode(' : ', $choice);
            $field['choices'][ $exploded[0] ] = $exploded[1];
          //  $field['choices'][ $choice ] = $choice;
        }
    }
    // return the field
    return $field;
}
add_filter('acf/load_field/name=left_box_icon', 'acf_load_icon_field_choices');