jQuery Select2 Controls

• patch2112

• August 12, 2020 at 10:07 am

Hello,

I’m using an ACF field group as the front-end UI of an AJAX powered feature. The can enter various data and click ‘add’ and it gets ajaxed into the db and a display table. They can then edit that row in the display table which AJAX re-populates the values back into the field group, etc.

This was working great until I needed a relationship field. I’ve tried all kinds of things but can’t figure out how to clear and set values of the relationship field. I’ve tried stuff like this (relationship field is in a group field)

$( '#acf-field_5f1f49df49567-field_5f331d9804a12' ).select2().val(null).trigger('change');

Any ideas how I can set the ID’s I want selected with jQuery?

Thanks!

• patch2112

• August 13, 2020 at 1:50 am

I changed the field type to post_object with multiple values enabled for aesthetic reasons. A lot of trial and error and digging found that this works to dynamically change the selected values…

var selector = '#acf-field_5f1f49df49567-field_5f33ff4c31a81';	
$(selector)
.empty() //empty select
.append($("<option/>") //add option tag in select
    .val("2514335") //set value for option to post it
    .text("Red")) //set a text for show in select
.append($("<option/>") //add option tag in select
    .val("2514356") //set value for option to post it
    .text("Blue")) //set a text for show in select
.val(["2514335","2514356"]) //select option of select2
.trigger("change"); //apply to select2